【JavaScript】【ブラウザ】Chromeでコントロールキーとマウスホイールによる拡大縮小を抑止する
通常、Ctrlキーとマウスホイールでブラウザ全体の拡大・縮小が可能である。
作っているWEBアプリによってはこの機能が邪魔な場合もあるため、JavaScriptでCtrlキーとマウスホイールによる拡大・縮小を抑止する。
Ctrl+マウスホイールの拡大縮小を抑止
preventDefault()を使うことで、マウスホイール操作を抑止できる。
1var ctrlFlg = false; //Ctrlキーの押下判定フラグ
2
3//マウスホイールが回転した時の処理
4function mousewheelFunc(e){
5 //Ctrlキーが押下されている場合は、拡大・縮小処理を行わない
6 if (ctrlFlg){
7 if (e.preventDefault()){
8 e.preventDefault();
9 } else {
10 return false;
11 }
12 }
13}
14
15//マウスホイールのイベントリスナー登録
16window.addEventListener("mousewheel", mousewheelFunc(e)), { passive: false } );
17
18
19//Ctrlキー押下または離した場合の処理
20function keyUpDownFunc(e){
21 //コントロールキーの状態を取得
22 ctrlFlg = e.ctrlKey; //コントロールキーが押下されている場合はtrue, 離された場合はfalse
23
24 return;
25}
26
27//キーボード操作時のイベントリスナー登録
28document.addEventListener("keyup", keyUpDownFunc(e));
29document.addEventListener("keydown", keyUpDownFunc(e));
コントロールキーの押下状態の取得は、今回は処理が単純なため、どちらも同じ関数で実行しているが、実際は押下時と離した時に分けた方が良いと思う。
マウスホイールのイベントリスナー登録時に、{ passive: false }を明示的に設定しない場合、Chromeではエラーが発生してマウスホイールの抑止が効かなくなる。
ChromeでpreventDefaultで発生しやすいエラー
イベントリスナーの第3引数に { passive: false } を設定しない場合、以下のエラーが発生する。
1[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.
See https://www.chromestatus.com/features/6662647093133312
リンク先の説明によると、 window.document、window.document.body、windowに登録した wheel、mousewheelイベントリスナーは、デフォルトでは パッシブとして扱われ、preventDefault()を呼び出しても無視されるとのこと。( Chrome 56 以降)
つまり、デフォルトだと{ passive: true }で、この状態だとpreventDefault()が効かない。
{ passive: true }よりも{ passive: false }の方が一瞬、反応が遅いみたいだが、そもそもマウスホイールの動作を制限したくてpreventDefault()を使うと思うので、特に気にせず { passive: false } に設定する。