JavaScriptでのイベントバブリングの停止
イベントのバブリングは、イベントがバブルアップする際に通過する任意の要素で停止できます。
これを行うには、要素のコード内でEventオブジェクトのstopPropagationメソッドを呼び出します。
次の例では、赤いブロックをクリックすると、そのブロック自体でトリガーされ、次に青いブロックでトリガーされ、そこで終了します。青いブロックがそれ以上のバブリングを停止するため、緑のブロックは何も反応しません。
elem1.addEventListener('click', function() {
console.log('緑');
});
elem2.addEventListener('click', function(event) {
console.log('青');
event.stopPropagation(); // バブリングを停止
});
elem3.addEventListener('click', function() {
console.log('赤');
});
確認してみてください:
