【JavaScript】右クリックを無効・有効にする方法｜コンテキストメニューの非表示

今回は、JavaScriptで右クリック（コンテキストメニュー）を無効にする方法と、有効に戻す方法となります。

右クリック（コンテキストメニュー）を無効にする方法

デフォルトの状態では、Webサイト上で右クリックを押すとcontextmenuイベントが発生し、コンテキストメニューが表示されます。

以下の例では、documentに対してaddEventListenerメソッドの第1引数にcontextmenuを指定し、第2引数にイベントに対してpreventDefaultメソッドを実行する関数を指定し、コンテキストメニューの表示を無効にしています。

document.addEventListener('contextmenu', (event) => {
     event.preventDefault();
}, true);

EventのpreventDefaultメソッドは、イベントを通常の動作どおりに伝播させない命令となります。上記例では、そのpreventDefaultメソッドにより、コンテキストメニューの表示を無効にしています。

以下の例は、上記のようなイベントリスナーを無効にするコードとなり、コンテキストメニューを無効にしているコードより前に呼び出される箇所に記述します。

それにより、コンテキストメニューが通常どおり表示されます。

document.addEventListener('contextmenu', (event) => {
     event.stopImmediatePropagation();
}, true);

イベントリスナーは追加した順番に呼び出されますが、途中で EventのstopImmediatePropagationメソッドを呼び出すと、以降のイベントリスナーが呼び出されなくなります。

上記例では、そのstopImmediatePropagationメソッドにより、contextmenuに対して追加した以降のイベントリスナーを呼び出さないようにしています。