JavaScript 親要素へのイベント伝播を防ぐ方法

ある要素のイベントが発生した時に、親要素へのイベント伝播をキャンセルする方法を書いていきます。

1. キャンセルする方法

以下のコードで、親要素への伝播を防ぐことができます。

event.stopPropagation();

2. コード例

2.1. stopPropagation()

以下の HTML と JavaScript を用意して、a タグをクリックします。

<div id="parent">
  <a id="child" href="#">ボタン</a>
</div>

document.getElementById('parent').addEventListener('click', (e) => {
  console.log('parent clicked.')
});

document.getElementById('child').addEventListener('click', (e) => {
  e.preventDefault();
  e.stopPropagation();
  console.log('child clicked.')
});

ログは以下の通りで、親要素のイベントが発生していないことが確認できます。

child clicked.

サンプルは以下の通りです。

See the Pen e by mamorum (@mamorum) on CodePen.

2.2. preventDefault() だけの場合

先ほどの HTML に、以下の JavaScript を用意すると、親要素にイベントが伝播します。

document.getElementById('parent').addEventListener('click', (e) => {
  console.log('parent clicked.')
});

document.getElementById('child').addEventListener('click', (e) => {
  e.preventDefault();
  console.log('child clicked.')
});

preventDefault() は、要素のデフォルトのイベントだけをキャンセルします。

サンプルは以下の通りです。

See the Pen preventDefalt(); by mamorum (@mamorum) on CodePen.

参考文献

【JavaScript入門】イベント処理のキャンセル方法 - kitanote

Web系開発メモ

Java, C#, HTML, CSS, JavaScript のことなどを書いてます。