はじめに
先日とあるWebラジオを聞こうとした際、バックグラウンド再生ができないことに気づき、どうにか毎回それほどの作業を必要とせずに、スマホでバックグラウンド再生できるようにできないか考えた時の副産物。
この方法の特徴
- リスナーを指定しなくていい（無名関数,アロー関数も無効化できる）
- 対象の要素を絞れる
- イベントの種類も絞れる
ここでは以下のような処理を無効化する場合を考えてみる。
exsample.js
window.addEventListener("test",function(){
//無効化したい処理
});
removeEventListener()が使えればよかったが、無名関数やアロー関数では使えないし、外部から使用できる変数に格納されているわけもないので、removeEventListener()では歯が立たない。
そこで思いついたがstopImmediatePropagation()を使う方法だ。
最初に実行&他のリスナーを阻止作戦
イベントリスナーは基本登録された順に実行されるが、それでは後から追加したイベントリスナーで他のリスナーが実行されるのを阻止できない。
そこで、addEventListener()三つ目の引数、useCaptureを使う。
細かいことはいろいろあるが、useCaptureをtrueに指定すれば大抵の場合そのイベントリスナーを最初に実行させるようにできる、ということらしい。
というわけで最終的にこんな感じ。
exsample.js
window.addEventListener("test",function(e){
e.stopImmediatePropagation();
},true);
-
useCaptureをtrueに指定して追加したリスナーが一番最初に実行されるようにする -
stopImmediatePropagation()で他のリスナーの実行を阻止
おわりに
おわり