イベントの伝播を停止する

キャプチャリングフェーズとバブリングフェーズでのイベントのさらなる伝播を停止するには、イベントハンドラー内で Event.stopPropation() メソッドを呼び出します。

Event.stopPropagation();Code language: CSS (css)

event.stopPropagation() メソッドは、要素のデフォルトの動作（例えば、リンクのクリック、チェックボックスのチェック）を停止しないことに注意してください。デフォルトの動作を停止したい場合は、Event.preventDefault() メソッドを使用できます。

<div> 内にボタンがある場合を考えます。

 <div id="box">
    <button class="btn">Register</button>
  </div>Code language: HTML, XML (xml)

ボタンをクリックすると、イベントは <div> 要素にバブリングします。次のコードは、ボタンをクリックすると2つの アラート ボックスを表示することを示しています。

const btn = document.querySelector('.btn');
const box = document.querySelector('#box');

btn.addEventListener('click', function (e) {
  alert('The button was clicked!');

});

box.addEventListener('click', function (e) {
  alert('The box was clicked!');
});Code language: JavaScript (javascript)

クリックイベントが <div> 要素に伝播するのを防ぐには、ボタンのイベントハンドラーで stopPropagation() メソッドを呼び出します。

btn.addEventListener('click', function (e) {
  alert('The button was clicked!');
  e.stopPropagation();
});Code language: JavaScript (javascript)

これで、ボタンをクリックすると1つのアラートボックスのみが表示されます。