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

JavaScriptのイベントのバブリングとキャンセルのサンプルです。
「イベントのバブリング」は、「イベントの伝播」ともいいます。
「イベントのキャンセル」は、「イベントの抑制」ともいいます。
イベントのバブリングのキャンセルはstopPropagationメソッドを使用します。

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

イベントのバブリング

発生したイベントが上位の要素に伝播することです。
バブリングをキャンセルするにはstopPropagationメソッドを使用します。
以下は、MDNのイベント伝播 (propagation)のリンクです。
https://developer.mozilla.org/ja/docs/DOM/DOM_Reference/Examples#Example_5.3A_Event_Propagation

コード

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

<body>
<div id="d1">一段目
		<div id="d2">二段目</div>
</div>
</body>
<script>
var d1 = document.getElementById('d1');
var d2 = document.getElementById('d2');

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

サンプル1

上記コードのサンプルです。
二段目をクリックすると、イベントの伝播のためアラートが2つ表示されます。

一段目

二段目

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

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

<body>
<div id="d3">一段目
		<div id="d4">二段目</div>
</div>
</body>
<script>
var d3 = document.getElementById('d3');
var d4 = document.getElementById('d4');

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

サンプル2

上記コードのサンプルです。
サンプル1と違い、二段目をクリックしてもアラートは1つしか表示されません。

一段目

二段目