stopPropagationとstopImmediatePropagationの違い

2024-04-02

JavaScript と jQuery における stopPropagation と stopImmediatePropagation の違い

stopPropagation と stopImmediatePropagation は、JavaScript と jQuery でイベント伝播を制御するために使用されるメソッドです。イベント伝播とは、イベントが発生した要素から親要素へと伝達していく仕組みです。

stopPropagation

stopPropagation メソッドは、イベントの伝播を 現在の要素とその子要素 で停止します。つまり、イベントは現在の要素の親要素には伝播されません。

例

const element = document.getElementById('my-element');

element.addEventListener('click', (event) => {
  // イベント処理
  event.stopPropagation();
});

上記のコードでは、my-element 要素をクリックすると、event.stopPropagation() メソッドによってイベントの伝播が停止されます。そのため、my-element 要素の親要素のイベントリスナーは実行されません。

stopImmediatePropagation メソッドは、イベントの伝播を 現在の要素とその子要素、およびすべてのキャプチャフェーズのイベントリスナー で停止します。

const element = document.getElementById('my-element');

element.addEventListener('click', (event) => {
  // イベント処理
  event.stopImmediatePropagation();
});

キャプチャフェーズとは、イベントがターゲット要素に到達する前に発生するイベント伝播のフェーズです。キャプチャフェーズでは、イベントはターゲット要素から親要素へと伝達されます。

メソッド	停止するイベント伝播
`stopPropagation`	現在の要素とその子要素
`stopImmediatePropagation`	現在の要素とその子要素、およびすべてのキャプチャフェーズのイベントリスナー

jQuery では、stopPropagation と stopImmediatePropagation メソッドはイベントオブジェクトの stop メソッドを使用して呼び出すことができます。

// イベントの伝播を現在の要素とその子要素で停止
$('.my-element').on('click', (event) => {
  // イベント処理
  event.stop();
});

// イベントの伝播を現在の要素とその子要素、およびすべてのキャプチャフェーズのイベントリスナーで停止
$('.my-element').on('click', (event) => {
  // イベント処理
  event.stopImmediatePropagation();
});

補足

stopPropagation と stopImmediatePropagation メソッドは、イベントオブジェクトのプロパティである cancelable が true の場合にのみ有効です。
イベントの伝播を完全に停止するには、preventDefault メソッドと組み合わせて使用する必要があります。

HTML

<div id="parent">
  <div id="child">
    <button id="button">ボタン</button>
  </div>
</div>

JavaScript

// `stopPropagation` メソッドを使用する例
const parent = document.getElementById('parent');
const child = document.getElementById('child');
const button = document.getElementById('button');

button.addEventListener('click', (event) => {
  console.log('ボタンがクリックされました');
  event.stopPropagation();
});

parent.addEventListener('click', (event) => {
  console.log('親要素がクリックされました');
});

// `stopImmediatePropagation` メソッドを使用する例
const element = document.getElementById('element');

element.addEventListener('click', (event) => {
  console.log('要素がクリックされました');
  event.stopImmediatePropagation();
});

element.addEventListener('click', (event) => {
  console.log('このイベントリスナーは実行されません');
});

実行結果

stopPropagation メソッドを使用する例

ボタンがクリックされました

要素がクリックされました

解説

stopPropagation メソッドを使用する例では、button 要素をクリックすると、console.log('ボタンがクリックされました') が出力されます。その後、event.stopPropagation() メソッドによってイベントの伝播が停止されるため、console.log('親要素がクリックされました') は出力されません。

その他のサンプル

イベント伝播をキャプチャフェーズで停止する例

const element = document.getElementById('element');

document.addEventListener('click', (event) => {
  console.log('キャプチャフェーズ: 要素がクリックされました');
  event.stopImmediatePropagation();
});

element.addEventListener('click', (event) => {
  console.log('要素がクリックされました');
});

イベントの伝播を完全に停止する例

const button = document.getElementById('button');

button.addEventListener('click', (event) => {
  console.log('ボタンがクリックされました');
  event.preventDefault();
  event.stopPropagation();
});

イベント伝播を制御する他の方法

イベントリスナーのオプション

addEventListener メソッドのオプション引数を使用して、イベント伝播を制御することができます。

useCapture オプション: イベント伝播のキャプチャフェーズでイベントリスナーを登録するかどうかを指定します。
once オプション: イベントが発生した後にイベントリスナーを自動的に削除するかどうかを指定します。

イベント делегирование とは、イベントが発生した要素ではなく、親要素にイベントリスナーを登録する方法です。イベント делегирование を使用すると、イベント伝播を利用して、子要素で発生したイベントを処理することができます。

イベントオブジェクトには、イベント伝播を制御するために使用できるいくつかのプロパティがあります。

cancelable プロパティ: イベントのキャンセルが可能かどうかを指定します。
defaultPrevented プロパティ: イベントのデフォルトアクションがキャンセルされているかどうかを指定します。

// イベントリスナーのオプションを使用する例
const element = document.getElementById('element');

element.addEventListener('click', (event) => {
  console.log('要素がクリックされました');
}, {
  useCapture: true,
  once: true,
});

// イベント делегирование を使用する例
const parent = document.getElementById('parent');

parent.addEventListener('click', (event) => {
  // 子要素で発生したイベントを処理
});

// イベントオブジェクトのプロパティを使用する例
const button = document.getElementById('button');

button.addEventListener('click', (event) => {
  if (event.cancelable) {
    event.preventDefault();
  }
});