通常、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で発生しやすいエラー
イベントリスナーの第3引数に { passive: false } を設定しない場合、以下のエラーが発生する。
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.
リンク先の説明によると、 window.document、window.document.body、windowに登録した wheel、mousewheelイベントリスナーは、デフォルトでは パッシブとして扱われ、preventDefault()を呼び出しても無視されるとのこと。( Chrome 56 以降)
つまり、デフォルトだと{ passive: true }で、この状態だとpreventDefault()が効かない。
{ passive: true }よりも{ passive: false }の方が一瞬、反応が遅いみたいだが、そもそもマウスホイールの動作を制限したくてpreventDefault()を使うと思うので、特に気にせず { passive: false } に設定する。