JavaScript イベント伝播とpreventDefault/stopPropagationの違いを徹底解説

2024-04-10

JavaScript イベントにおける event.stopPropagation() と event.preventDefault() の違い

event.stopPropagation() と event.preventDefault() は、このイベント伝播を制御するためのメソッドです。それぞれ異なる役割を持つため、混同しないことが重要です。

event.stopPropagation()

event.stopPropagation() は、イベントの伝播を止める メソッドです。イベントが発生した要素でこのメソッドを呼び出すと、その要素以降の親要素へのイベント伝播が阻止されます。

例：ボタンクリックイベントの伝播を止める

<button onclick="stopPropagation(event)">ボタン</button>

<script>
function stopPropagation(event) {
  // イベントの伝播を止める
  event.stopPropagation();
}
</script>

上記のコードでは、ボタンをクリックしても、親要素へのイベント伝播は阻止されます。

event.preventDefault()

event.preventDefault() は、イベントのデフォルトアクションをキャンセル するメソッドです。イベントが発生した要素でこのメソッドを呼び出すと、ブラウザが本来行うデフォルトアクションが実行されなくなります。

例：アンカーリンクの遷移をキャンセルする

<a href="https://example.com/" onclick="preventDefault(event)">リンク</a>

<script>
function preventDefault(event) {
  // イベントのデフォルトアクションをキャンセルする
  event.preventDefault();
}
</script>

上記のコードでは、リンクをクリックしても、ページ遷移は行われなくなります。

まとめ

event.stopPropagation(): イベントの伝播を止める
event.preventDefault(): イベントのデフォルトアクションをキャンセルする

それぞれの役割を理解し、目的に応じて使い分けることが重要です。

イベント伝播を止める

<div onclick="stopPropagation(event)">
  <button onclick="stopPropagation(event)">ボタン</button>
</div>

<script>
function stopPropagation(event) {
  // イベントの伝播を止める
  event.stopPropagation();
  console.log('イベント伝播を止めました');
}
</script>

イベントのデフォルトアクションをキャンセルする

<a href="https://example.com/" onclick="preventDefault(event)">リンク</a>

<script>
function preventDefault(event) {
  // イベントのデフォルトアクションをキャンセルする
  event.preventDefault();
  console.log('イベントのデフォルトアクションをキャンセルしました');
}
</script>

複数のイベントを同時に処理する

<button onclick="stopPropagation(event); preventDefault(event)">ボタン</button>

<script>
function stopPropagation(event) {
  // イベントの伝播を止める
  event.stopPropagation();
  console.log('イベント伝播を止めました');
}

function preventDefault(event) {
  // イベントのデフォルトアクションをキャンセルする
  event.preventDefault();
  console.log('イベントのデフォルトアクションをキャンセルしました');
}
</script>

上記のコードでは、ボタンをクリックすると、イベント伝播とデフォルトアクションの両方がキャンセルされます。

イベントオブジェクトの詳細

event オブジェクトには、イベントに関する様々な情報が含まれています。以下のプロパティは、イベント伝播とデフォルトアクションを制御する際に役立ちます。

type: イベントの種類
target: イベントが発生した要素
currentTarget: 現在のイベント処理対象要素

イベントオブジェクトの詳細については、以下のサイトを参照してください。

イベント伝播とデフォルトアクションを制御するその他の方法

return false; を使用する

イベントハンドラ関数の末尾に return false; を記述すると、イベントのデフォルトアクションをキャンセルできます。ただし、この方法はすべてのブラウザで動作するわけではありません。

<button onclick="preventDefault(event)">ボタン</button>

<script>
function preventDefault(event) {
  // イベントのデフォルトアクションをキャンセルする
  return false;
}
</script>

e.cancelBubble = true; を使用する

event オブジェクトの cancelBubble プロパティを true に設定すると、イベント伝播を阻止できます。ただし、この方法は古いブラウザでのみ動作します。

<button onclick="stopPropagation(event)">ボタン</button>

<script>
function stopPropagation(event) {
  // イベント伝播を止める
  event.cancelBubble = true;
}
</script>

addEventListener() メソッドのオプション引数を使用して、イベント伝播とデフォルトアクションを制御できます。

<button onclick="preventDefault(event)">ボタン</button>

<script>
button.addEventListener('click', preventDefault, {
  capture: true, // イベント伝播のキャプチャフェーズで処理する
  once: true, // イベントを一度だけ処理する
  passive: true, // イベントのデフォルトアクションをキャンセルしない
});

function preventDefault(event) {
  // イベントのデフォルトアクションをキャンセルする
  event.preventDefault();
}
</script>

上記のように、addEventListener() メソッドのオプション引数に capture: true を設定すると、イベント伝播のキャプチャフェーズで処理できます。また、once: true を設定すると、イベントを一度だけ処理できます。さらに、passive: true を設定すると、イベントのデフォルトアクションをキャンセルしません。

ライブラリを使用する

jQuery などのライブラリを使用すると、イベント伝播とデフォルトアクションを簡単に制御できます。

<button onclick="preventDefault(event)">ボタン</button>

<script>
$(button).click(function(event) {
  // イベントのデフォルトアクションをキャンセルする
  event.preventDefault();
});
</script>