Javascriptイベントハンドリング

e.stopPropagation()

イベントが発生した要素でのイベント伝播（イベントバブリング）を停止させるために使用されます。

イベント伝播（イベントバブリング）とは、DOMツリーの階層構造に基づいてイベントが上位の要素から下位の要素に向かって伝播する仕組みです。例えば、ある要素のクリックイベントが発生した場合、その要素上でのクリックイベントだけでなく、その要素を包含する親要素や祖先要素にもクリックイベントが伝播していきます。

e.stopPropagation() を使用すると、イベントが現在の要素でのハンドリングを終えた後に、親要素や祖先要素にイベントが伝播しなくなります。つまり、イベント伝播が止まり、他の要素でのイベントハンドリングが実行されなくなります。

<div id="outer" onclick="console.log('Outer div clicked')">
  <div id="inner" onclick="event.stopPropagation(); console.log('Inner div clicked')">
    Click me!
  </div>
</div>

上記の例では、2つの <div> 要素がネストされています。内側の <div> をクリックした場合、e.stopPropagation() が呼び出されているため、クリックイベントは内側の要素でのみハンドリングされ、外側の要素でのハンドリングは行われません。つまり、コンソールには “Inner div clicked” というメッセージのみが表示されます。外側の要素のクリックハンドラは実行されません。