event.stopPropagation()

イベントストッププロパゲーション（イベント）

意味イベント伝播の停止

event.stopPropagation()とは？

イベントの伝播を停止するメソッドです。これにより、親や子のイベントハンドラが実行されなくなります。

event.stopPropagation()の具体的な使い方

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

<div id="outer" style="padding: 20px; background-color: #f0f0f0;">
  外側の要素
  <div id="inner" style="padding: 20px; background-color: #d0d0d0;">
    内側の要素
    <button id="btn">クリックしてください</button>
  </div>
</div>

<script>
const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
const btn = document.getElementById('btn');

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

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

btn.addEventListener('click', (event) => {
  event.stopPropagation();
  console.log('ボタンがクリックされました（伝播停止）');
});
</script>

この例では、ボタンをクリックするとevent.stopPropagation()が呼び出され、イベントの伝播が停止します。その結果、ボタンのクリックイベントだけが処理され、内側や外側の要素のクリックイベントは発火しません。ボタン以外の部分をクリックすると、イベントが通常通り伝播することを確認できます。

event.stopPropagation()に関するよくある質問

Q. stopPropagation()の目的は？

A. stopPropagation()メソッドの主な目的は、イベントの伝播（バブリングやキャプチャリング）を停止することです。これにより、親要素や子要素のイベントハンドラが呼び出されるのを防ぐことができます。

Q. いつ使うべきですか？

A. 特定の要素でのみイベントを処理し、親要素や子要素でのイベント処理を避けたい場合に使用します。例えば、モーダルウィンドウ内のクリックイベントが背景に伝播するのを防ぐ場合などに有用です。

Q. preventDefault()との違いは？

A. stopPropagation()はイベントの伝播を停止しますが、preventDefault()はデフォルトのブラウザ動作を阻止します。例えば、リンクのクリックイベントでpreventDefault()を使用すると、ページ遷移が発生しなくなります。

event.stopPropagation()が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのevent.stopPropagation()やclick、event.bubbles、input、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。