JavaScript イベントのバブリングとキャンセル(stopPropagation)

JavaScriptのイベントのバブリングとキャンセルのサンプルです。
動くサンプルもあります。

目次

イベントのバブリング

イベントのバブリングのサンプル

一段目をクリックすると、アラートが表示されます。
二段目をクリックすると、イベントの伝播のためアラートが2つ表示されます。

一段目

二段目

コード

上記サンプルのコードです。


<div id="div1">一段目
		<div id="div2">二段目</div>
</div>

<script>
const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");

div1.addEventListener("click",function(e){ 
	alert("一段目のイベントリスナ");
});
div2.addEventListener("click",function(e){ 
	alert("二段目のイベントリスナ");
});
</script>

2行目の「一段目」という文字をクリックすると10行目のイベントリスナが実行されます。
3行目の「二段目」という文字をクリックすると13行目のイベントリスナが実行された後、10行目のイベントリスナも実行されます。
→イベントの伝播(バブリング)です。

 

イベントのバブリングのキャンセル

イベントオブジェクト.stopPropagation();
  • イベントのバブリングのキャンセルはstopPropagationメソッドを使用します。
  • イベントオブジェクトのメソッドです。
  • 「イベントのキャンセル」は、「イベントの抑制」ともいいます。
  • 以下は、MDNのstopPropagationのリンクです。
    https://developer.mozilla.org/ja/docs/Web/API/Event/stopPropagation

キャンセルのサンプル

一段目をクリックすると、アラートが表示されます。
二段目をクリックしても、イベントのバブリングのキャンセルをしているため、アラートは1つしか表示されません。

一段目

二段目

コード

上記サンプルのコードです。


<div id="div3">一段目
		<div id="div4">二段目</div>
</div>

<script>
const div3 = document.getElementById("div3");
const div4 = document.getElementById("div4");

div3.addEventListener("click",function(e){ 
	alert("一段目のイベントリスナ");
});
div4.addEventListener("click",function(e){ 
	alert("二段目のイベントリスナ");
	e.stopPropagation();
});
</script>

15行目にstopPropagationメソッドを追加しています。
3行目の「二段目」という文字クリックすると13行目のイベントリスナが実行された後、10行目のイベントリスナは実行されません。

関連の記事

JavaScript イベントリスナを登録するサンプル(addEventListener)
JavaScript イベントリスナを削除するサンプル(removeEventListener)
JavaScript イベントを無効化する(preventDefault)
JavaScript イベントとイベントハンドラのサンプル

△上に戻る