JavaScriptにおけるイベントバブリングの即時停止

イベント処理を完全に停止するために、 現代のブラウザは stopImmediatePropagation メソッドをサポートしています。 このメソッドはバブリングを防ぐだけでなく、 現在の要素でのイベント処理も停止します。 実際に使用してみましょう:

javascriptelem1.addEventListener('click', function() {
  console.log('緑');
});
elem2.addEventListener('click', function(event) {
  console.log('青 - 最初のハンドラ');
  event.stopImmediatePropagation();     // バブリングを停止
});
elem2.addEventListener('click', function() {
  console.log('青 - 2番目のハンドラ'); // もはや動作しない
});
elem3.addEventListener('click', function() {
  console.log('赤');
});

確認することができます: