【jQuery】Chromeのコンソールエラー "[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive." をjQueryのコードをそのままに解決した

※2021.05.22：本記事の修正版となる記事を作成しました。

TL; DR

• jQueryのコードをaddEventListenerで囲む
• addEventListenerの第3引数でpassive: falseを設定する
• jQueryの.onから取れるoriginalEventはaddEventListenerで渡されるオブジェクトを取れる

発生していた問題

前提

• スクロールを検知して、イージングのアニメーションを付与するコードを書いていた

こんな感じの

$(document).on(mousewheelevent, function (e) {
 e.preventDefault();
 var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
 ...
 $('html,body').stop().animate({ scrollTop: scrSet }, scrSpeed, scrEasing);
});

問題

• Chromeのコンソールに下のエラーが。

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.

解決したかわからないがとりあえずエラーが止まったコード

document.addEventListener(mousewheelevent, function(e) {
 $(function () {
  e.preventDefault();
  var delta = e.deltaY ? -(e.deltaY) : e.wheelDelta ? e.wheelDelta : -(e.detail);
  ...
  $('html,body').stop().animate({ scrollTop: scrSet }, scrSpeed, scrEasing);
 });
}, {passive: false});

• エラーは止まったが、こういう書き方が良いかわからない

実際に書いたコード（を置いたレポジトリ）

• itsumoonazicode/jQueryToVanilla: Repository for moving from jQuery to Vanilla JS

参考

• jQuery Event から DOM Event を取る - Qiita