使い方
モジュール(prevent.js)
class Prevent {
#canvas = undefined;
/**
* @param {*} canvas - canvas element
*/
constructor(canvas) {
this.#canvas = canvas;
}
#prevent = (e) => { e.preventDefault();};
enable(){
this.#canvas.addEventListener("wheel", this.#prevent, { passive:false});
this.#canvas.addEventListener("contextmenu", this.#prevent);
}
disable(){
this.#canvas.removeEventListener("wheel", this.#prevent, { passive:false});
this.#canvas.removeEventListener("contextmenu", this.#prevent);
}
}
export { Prevent }
使う側のコード
import { Prevent } from "./modules/prevent.js";
const canvas = document.getElementById('canvasId');
const prevent = new Prevent(canvas);
prevent.enable();
使用手順
- モジュールを保存(prevent.js)
- インポートする
- canvas要素を取得する
- canvas要素を引数にpreventオブジェクトを生成
- prevent.enable();で有効にする
使用例
補足
名前をcanvasにしていますがcanvasElement以外の要素でもホイール、右クリック等を無効に出来ます。
コメント