【JavaScript】Event.stopPropagation()・Event.preventDefault()

Event.stopPropagation()

キャプチャリング・バブリングの過程において、イベントの伝播を停止する。
ただし、リンクの参照先への移動やチェックボックスのチェックなど、ブラウザデフォルトのイベントは停止できない。

キャプチャリング

下記イベント処理のフェーズのうち、イベントがターゲット要素まで下りるフェーズ。

1. キャプチャリングフェーズ
   同上

2. ターゲットフェーズ
   イベントがターゲット要素に到達したフェーズ

3. バブリングフェーズ
   ターゲット要素から祖先要素までバブリングしていくフェーズ

バブリング

要素上でイベントが発生した場合、イベントが発生した要素の祖先要素までイベントハンドラが実行されること。

Event.preventDefault()

ブラウザがデフォルトで定義しているイベントを無効にする。

サンプル

通常

チェックボックスをクリックすると、メッセージ表示とチェックボックスにチェックがつくイベントが実行される

See the Pen デフォルト by SatohSatoh (@satohsatoh) on CodePen.

Event.stopPropagation()

チェックボックスにチェックを入れても、メッセージが表示されなくなる

See the Pen stopPropagation by SatohSatoh (@satohsatoh) on CodePen.

Event.preventDefault()

メッセージは表示されるが、チェックボックスのチェックがされなくなる

See the Pen test by SatohSatoh (@satohsatoh) on CodePen.

Event.stopPropagation()・Event.preventDefault()

チェックもされず、メッセージも表示されない

See the Pen stopDefaultProgration by SatohSatoh (@satohsatoh) on CodePen.

参考

• Event.stopPropagation()
• Event.preventDefault()
• バブリング と キャプチャリング
• Qiitaで記事にCodePenが埋め込めるようになりました