@ledsun blog

Hのキーがhellで、Sのキーがslaveだ、と彼は思った。そしてYのキーがyouだ。

Passive event listeners

iPadSafariでタップした瞬間の選択文字列が取得したいです。 mousedownイベントは、文字列選択が解除されてから発火します。 そこでtouchstartイベントを監視することにしました。

するとChromeで見慣れない警告が出てきました。

f:id:ledsun:20220120223822p:plain
touchstartイベントを監視するとGoogle Chromeで表示される警告

リンク先のPassive event listeners - Chrome Platform Statusの、さらにリンク先の EventListenerOptions/explainer.md at gh-pages · WICG/EventListenerOptions · GitHub に詳しい説明がありました。

タブレットのタッチ操作はスクロールにも使います。 touchstartイベントを監視するとpreventDefaultされるかもしれないので、イベントハンドラーが完了するまでスクロールが開始できません。 数百ms掛かると、ユーザー体験を明らかに悪くします。

そこでaddEventListnerに{passive:true}オプションを渡します。 {passive:true}イベントハンドラーがpreventDefaultを呼ばないことを保証します。 ブラウザはpreventDefaultが呼ばれないことがわかっているので、イベントハンドラーの終了を待つことなくヌルヌルスクロールできるのでした。