event.stopImmediatePropagation() について

はじめに

現代の JavaScript チュートリアルを読んでいる時にevent.stopImmediatePropagation()という見慣れないイベントを見かけたので、今回はそれについて調べてみました。

event.stopImmediatePropagation()とは

stopImmediatePropagation() は Event インターフェイスのメソッドで、呼び出されている同じイベントの他のリスナーを抑止します。

同じ要素で、同じ種類のイベントに複数のリスナーが装着されている場合、追加された順番に呼び出されます。もし、そのような呼び出しの最中に stopImmediatePropagation() が呼び出された場合、残りのリスナーは呼び出されなくなります。

stopPropagation()とかなり似たように思えますが、stopPropagation()とは決定的な差があるようです。

「stopPropagationはバブリング(親要素のイベントハンドラ実行)を止める」に対し、「stopImmediatePropagationはバブリングを止め、かつ現在の要素で登録されている他のハンドラの実行もさせない」ということです。

参考に、簡単な例をCodePenで作成したのでみていきましょう

See the Pen stopImmediateProp by hikagami (@hikagami0210) on CodePen.

長いのでコードは折りたたみます

// 背景
const base = document.getElementById("base");
base.addEventListener("click", () => alert("baseのクリックイベント"));

// nomalのボタン
const btn = document.getElementById("noStop");
btn.addEventListener("click", () => alert("normalのクリックイベント"));

// stopPropagationのボタン
const stopPropBtn = document.getElementById("stopProp");
stopPropBtn.addEventListener("click", (event) => {
  event.stopPropagation();
  alert(`stopPropagationのクリックイベント`);
});
stopPropBtn.addEventListener("click", () =>
  alert(`stopPropagationのクリックイベント 2`)
);

// stopImmediatePropagationのボタン
const stopImmediatePropBtn = document.getElementById("stopImmediateProp");
stopImmediatePropBtn.addEventListener("click", (event) => {
  event.stopImmediatePropagation();
  alert(`stopImmediatePropagationのクリックイベント`);
});
stopImmediatePropBtn.addEventListener("click", (event) => {
  event.stopImmediatePropagation();
  alert(`stopImmediatePropagationのクリックイベント 2`);
});

nomalのボタンは背後のbaseまでクリックイベントが伝播しています。

stopPropagationのボタンは、baseへのバブリングを防ぐことはできています。
しかし、alert("stopPropagationのクリックイベント 2")が発火しているので、同じ要素のクリックイベントは防げていないことがわかります。

stopImmediatePropagationのボタンは、baseへのバブリングを防ぐとともに、alert("stopImmediatePropagationのクリックイベント 2")の発火までなくなっています。

MDNで確認したstopImmediatePropagation()の挙動とおなじですね。

おわりに

最後までお読みいただきありがとうございました。

覚えておけばいつか役に立つような気がします🤨