◆ IE でも 9 から使えた
event に stopImmediatePropagation というメソッドがあります
jQuery でおなじみの その要素に複数リスナがある場合に 残りのリスナの実行もキャンセルする機能です

jQuery は独自にイベントにつけたリスナを管理してるので 残りを実行しないということができましたが Native な JavaScript だとそういう機能をサポートしてないと思っていました

少し前にライブラリがセットするリスナをキャンセルしたくていい方法ないか調べていたときにヒントにならないかと stopImmediatePropagation を調べると MDN のページがありました

MDN ということはもしや！！

と思って確認すると普通に使えました
最近の追加かなと見てみるとなんとかなり昔で Chrome はほぼ初期化から IE は 9 からのようです

jQuery なんかライブラリはいらない！そのままの JavaScript で十分！ と言ってる割にこんな基本的なものを知らなかったとは不覚過ぎます


ついでなので stopImmediatePropagation を簡単に機能を説明すると
<div id="div">
div
<span id="span">span</span>
</div>

<script>
div.addEventListener("click", e => console.log(3))
span.addEventListener("click", e => {
console.log(1)

// e.stopImmediatePropagation()
// e.stopPropagation()
})
span.addEventListener("click", e => console.log(2))
</script>

このコードで span をクリックすると click の 2 つのリスナが実行されて 次にバブリングによって div の click リスナが実行されます
なので結果は
1
2
3
です

e.stopImmediatePropagation のコメントアウトを解除すると
その要素の次のリスナもキャンセルするので
1
だけになります

e.stopPropagation のほうのコメントアウトを解除すると
その要素のリスナは実行してバブリングで上の要素に伝わらなくなるので
1
2
となります


これは数少ない jQuery のメリットだと思っていたのにこれも JavaScript で十分だったとなると jQuery はホントいらないものになってますね
IE 除けば jQuery の必要性は サードパーティ製ライブラリのみといっていいのかもしれません