touchmoveイベントでpreventDefault()を呼び出したらエラーが発生したので対応

touchmoveイベントで処理したいことがあって、その処理の中でpreventDefault()を呼び出したらエラーが出たので、対応方法や原因についてメモしておきます。

実行しようとしたコードは以下の通り、至って単純なものです。

window.addEventListener('touchmove', function(event) {
  event.preventDefault();
});

上記のコードを実行すると、動作せず、ブラウザのコンソールにエラーメッセージが出力されます。

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

このエラーについて調べると、どうやら、touchstartやtouchmoveイベントで何かしらの処理を呼び出す場合、ブラウザ本来のスクロール処理にも影響が出てパフォーマンスが低下してしまう可能性があるため、最新のChromeやFirefoxのブラウザでは、デフォルトでpreventDefaultが使えないようになっているようです。

EventTarget.addEventListener() - Web API | MDN

touchstartやtouchmoveイベントの処理でpreventDefaultを呼び出すようにするには以下のように、オプションで「passive: false」を設定します。

window.addEventListener('touchmove', function(event) {
  event.preventDefault();
},  { passive: false });

設定後、再度、動作確認を行うと、正常に実行されました。