JavaScriptでイベントをキャンセルする方法！子要素から親要素へのonClickイベント伝搬をストップ

HTMLでは、クリックなどのイベントが発生した時に、発生した要素だけでなくその親要素にイベントが伝搬していくようです。

イベントが発生した要素から親要素へとどんどん伝播していくことを、バブリング（Bubbling）とか言うみたいですね。

いや、それじゃ困る！！

と言うことで、イベントの伝搬を止める方法を紹介します。

イベントのキャンセルをする方法

JavaScriptのEvent.stopPropagation()メソッドを使用すると、これ以上のイベントの伝搬を止めることができます。

event.stopPropagation();

参考：Event.stopPropagation() – JavaScript | MDN

具体的に使い方を見ていきましょう。

使用例

クリックすると、アラートのダイヤログが出る要素を作成しました。

See the Pen イベント伝搬防止 by amateur-engineer (@amaeng) on CodePen.

外枠のボックス<div>の中に、ペンみたいなアイコンの<button>を設置しています。

ボックスが二つありますが、それぞれ<button>をクリックしたときの動作が異なります。

Propagate：イベントが伝搬するため子要素と親要素のアラートが両方表示
Stop Propagation：イベントの伝搬を止めて、子要素のアラートのみ表示

JavaScriptの処理は以下のような感じ

//<div>をクリックしたときに表示されるアラート
const clickDiv = () => {
  alert("<div> was clicked");
}

//<button>をクリックしたときに表示されるアラート
const clickBtn = () => {
  alert("<button> was clicked");
}

//イベントの伝搬を止めて、親要素のアラートを表示させない
const stopPropagation = (event) => {
    clickBtn();
    event.stopPropagation();
}

親要素と子要素のイベント処理はそれぞれ以下のようにしています。

親要素の<div>をクリック→「<div> was clicked」のアラート
子要素の<button>をクリック→「<button> was clicked」のアラート

<div class='box'>
  <div class='item' onclick="clickDiv()">
    Propagate
    <button class="btn" onclick="clickBtn()">
      <div class="edit-icon" />
    </button>
  </div>
  <div class='item' onclick="clickDiv()">
    Stop Propagation
    <button class="btn" onclick="stopPropagation(event)">
      <div class="edit-icon" />
    </button>
  </div>
</div>

親要素だけをクリックした場合はアラート一つですが、子要素をクリックするとイベントが伝搬してアラートが二つ出る仕組みです。

stopPropagation(event)の処理を通るときは、イベント伝搬を止めているため親要素のイベントが発火されずにアラートは一つになります。

まとめ

イベント伝搬はEvent.stopPropagation()メソッドで止めよう！