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

通常、Ctrlキーとマウスホイールでブラウザ全体の拡大・縮小が可能である。

作っているWEBアプリによってはこの機能が邪魔な場合もあるため、JavaScriptでCtrlキーとマウスホイールによる拡大・縮小を抑止する。

Ctrl＋マウスホイールの拡大縮小を抑止

preventDefault()を使うことで、マウスホイール操作を抑止できる。

var ctrlFlg = false;    //Ctrlキーの押下判定フラグ

//マウスホイールが回転した時の処理
function mousewheelFunc(e){
    //Ctrlキーが押下されている場合は、拡大・縮小処理を行わない
    if (ctrlFlg){
        if (e.preventDefault()){
            e.preventDefault();
        } else {
            return false;
        }
    }
}

//マウスホイールのイベントリスナー登録
window.addEventListener("mousewheel", mousewheelFunc(e)), { passive: false } );


//Ctrlキー押下または離した場合の処理
function keyUpDownFunc(e){
    //コントロールキーの状態を取得
    ctrlFlg = e.ctrlKey;    //コントロールキーが押下されている場合はtrue, 離された場合はfalse
    
    return;
}

//キーボード操作時のイベントリスナー登録
document.addEventListener("keyup", keyUpDownFunc(e));
document.addEventListener("keydown", keyUpDownFunc(e));

コントロールキーの押下状態の取得は、今回は処理が単純なため、どちらも同じ関数で実行しているが、実際は押下時と離した時に分けた方が良いと思う。

マウスホイールのイベントリスナー登録時に、{ passive: false }を明示的に設定しない場合、Chromeではエラーが発生してマウスホイールの抑止が効かなくなる。

ChromeでpreventDefaultで発生しやすいエラー

イベントリスナーの第３引数に { passive: false } を設定しない場合、以下のエラーが発生する。

リンク先の説明によると、 window.document、window.document.body、windowに登録した wheel、mousewheelイベントリスナーは、デフォルトでは パッシブとして扱われ、preventDefault（）を呼び出しても無視されるとのこと。( Chrome 56 以降)

つまり、デフォルトだと{ passive: true }で、この状態だとpreventDefault()が効かない。

{ passive: true }よりも{ passive: false }の方が一瞬、反応が遅いみたいだが、そもそもマウスホイールの動作を制限したくてpreventDefault()を使うと思うので、特に気にせず { passive: false } に設定する。