javascript | canvas内でスクロール、右クリックを無効にするモジュール

スポンサーリンク

使い方

モジュール(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();

使用手順

  1. モジュールを保存(prevent.js)
  2. インポートする
  3. canvas要素を取得する
  4. canvas要素を引数にpreventオブジェクトを生成
  5. prevent.enable();で有効にする

使用例

補足

名前をcanvasにしていますがcanvasElement以外の要素でもホイール、右クリック等を無効に出来ます。

コメント

タイトルとURLをコピーしました