JavaScript

【JavaScript】【ブラウザ】Chromeでコントロールキーとマウスホイールによる拡大縮小を抑止する

MAX

通常、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 } に設定する。

スポンサーリンク
ABOUT ME
MAX
MAX
ITエンジニア、データサイエンティスト
新卒でSIerに入社し、フリーランスになってWEB系へ転向。
その後AIの世界へ足を踏み入れ、正社員に戻る。 テーブルデータの分析がメイン。
スポンサーリンク
記事URLをコピーしました