[回避策]jQueryのonでpassiveをfalseにする方法

2020.06.25 - Note

[回避策]jQueryのonでpassiveをfalseにする方法

エラー内容
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.
これはイベントに{ passive: true }でバインドしたハンドラ内でe.preventDefault();を行った時起きるエラーです。

jQueryのonメソッドはデフォルトで{ passive: true }となってしまうため
回避策としてjsデフォルトのaddEventListenerを使う方法がよく紹介されます。

2020年6月25日現在jQueryの機能として追加はされていないようです。
しかしjQueryを使っての回避策として、特定のネームスペースをつけた時のみ挙動を変更する方法がありました。

//特定のネームスペースで挙動を変える設定
jQuery.event.special.touchmove = {
  setup: function( _, ns, handle ){
    if ( !ns.includes("drag") ) return false;
    this.addEventListener("touchmove", handle, { passive: false });
  }
};

//通常通りネームスペースを付けてバインド
$('.target').on('touchmove.drag', function(e){
  e.preventDefault();
})

//特定のネームスペースで挙動を変える設定

jQuery.event.special.touchmove = {

setup: function( _, ns, handle ){

if ( !ns.includes("drag") ) return false;

this.addEventListener("touchmove", handle, { passive: false });

}

};

//通常通りネームスペースを付けてバインド

$('.target').on('touchmove.drag', function(e){

e.preventDefault();

})

イベントの種類(touchmove)とネームスペース(drag)の部分は
実際のプログラムに合わせて変更する必要があるかもしれません。

この回避策は下記ページにありました。
jQueryの機能としてpassiveを変更できるようにするかの議論のようです。
Add support for passive event listeners | GitHub

この回避策は
$(document).on(‘touchmove.drag’, ‘.target’, callback)
のようなデリゲートでの形には対応していないようです。

BLOG