javaScriptイベントキャンセルをまとめてみた

※サンプルソースにはAngularを使いますが、ReactでもVueでも考え方は同じです。

event.preventDefault

eventのDefaultの動作をpreventする(妨げる)

• 例

<a href="/" (click)="onClick($event)">スラッシュ</a>

onClick($event: Event): void {
    $event.preventDefault();
}

• 説明
  例では、アンカータグのデフォルトのイベント(aタグのherfで指定されたURLへ遷移する)を $event.preventDefault()でキャンセルしているので、クリックしても何も起こりません。

stopPropagation

イベントの伝搬を停止する

• 例

<div (click)="onClickdiv()">
  <button (click)="onClickbutton()">ボタンクリック</button>
</div>

  onClickdiv(): void {
    console.log('ディブクリック');
  }

  onClickbutton(): void {
    console.log('ボタンクリック');
  }

このような場合、コンソールに「ボタンクリック」とだけ表示したくても「ディブクリック」も表示されてしまいます。いかがそれを解消するための例になります。

<div (click)="onClickdiv()">
  <button (click)="onClickbutton()">ボタンクリック</button>
</div>

  onClickdiv(): void {
    console.log('ディブクリック');
  }

  onClickbutton($event: Event): void {
    console.log('ボタンクリック');
    $event.stopPropagation();
  }

• 説明
  stopPropagationを実行した後は、親要素に同種のイベントが設定されていても実行されません。ちなみに「Propagation」は伝搬という意味です。

stopImmediatePropagation

追記予定