JavaScriptでcontextmenuイベントを設定する方法 ！

JavaScriptを使って、contextmenuイベントを設定する方法について書いています。
contextmenuイベントを使うことで、右クリック時に何らかの処理をすることができます。

実際に動くサンプルを使いつつ、以下について書いています。

・contextmenuイベントとは？
・contextmenuイベントをつける方法
・contextmenuイベントを使って右クリックを禁止する

contextmenuイベントとは？

contextmenuイベントは、ユーザーが右クリックしたときに発生するイベントです。
このイベントを活用することで、右クリックメニューの動作をカスタマイズしたり、特定の要素で右クリックを禁止することができます。

contextmenuイベントをつける方法

oncontextmenu属性を使う方法と、addEventListenerメソッドを使ってイベントをつけることができます。

DOMにoncontextmenuを使ってイベントをつける

oncontextmenu属性を使ってイベントをつけてみました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Contextmenu テスト</title>
    <script>
        function contextMenuTest() {
            alert("右クリックしました!!");
        }
    </script>
</head>
<body oncontextmenu="contextMenuTest()" style="background-color: skyblue; width: 100%; height: 500px;">
    テスト
</body>
</html>

HTMLの解説

bodyタグに対して、oncontextmenu属性を設定しています。
これで、bodyタグ内のコンテンツをクリックすると、設定したcontextMenuTest関数が動作します。

JavaScriptの解説

contextMenuTest関数では、実行されるとアラートが表示されます。

動作確認

実際に動作させると、下記のように右クリックしてアラートが表示されることが確認できました。
oncontextmenuを使って、右クリックの動作確認

addEventListenerを使ってイベントをつける

addEventListenerメソッドを使用することでも、同じようにイベントをつけることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Contextmenu テスト</title>
    <script>
        window.onload = () => {
            const body = document.querySelector("body");
            body.addEventListener('contextmenu', () => {
                alert("右クリックしました!!");
            });
        }
    </script>
</head>
<body style="background-color: skyblue; width: 100%; height: 500px;">
    テスト
</body>
</html>

HTMLの解説

bodyタグにたいして、イベントをつけます。
bodyタグにはstyle以外の属性がついていない状態です。

JavaScriptの解説

window.onloadで読み込み時に実行されるようにしています。

querySelectorでbodyタグを取得して、addEventListenerメソッドでイベントを追加しています。
第1引数の「’contextmenu’」でコンテキストメニューイベントが追加されます。
第2引数は実際に実行される処理を書きます。

こちらのコードも動作確認すると、先ほどと同じようにアラートが表示された後にメニューが開きます。

contextmenuイベントをつけるときの注意点

注意点として、設定した要素の範囲外をクリックしたら動作しません。
例えば、下記のようにbodyに設定して、全体に効くようにみえても

<body oncontextmenu="alert('テスト')">
    テスト
</body>

コンテンツの内容が少ない場合には、コンテンツ外がクリックされて正常に動作しないことがあります。
全体につけたいときには、documentに設定すると良いかと思います。

contextmenuで右クリックを禁止する

contextmenuイベントを使用して、右クリックを禁止する方法です。
こちらのサンプルでは、documentにcontextmenuをつけることで、ページ全体で右クリックを禁止しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Contextmenu 右クリック禁止</title>
    <script>
        window.onload = () => {
            document.addEventListener('contextmenu', (event) => {
                // 右クリックを禁止
                event.preventDefault();
            });
        }
    </script>
</head>
<body>
    右クリック禁止！！<br>
    どこを押してもメニューが開かない
</body>
</html>

HTMLの解説

ページ全体にイベントを指定します。
bodyタグには、文章を書いているだけです。

JavaScriptの解説

window.onloadで読み込み時に実行されるようにしました。
documentからaddEventListenerメソッドを使って、ページ全体にcontextmenuイベントが効くようにしました。

引数で受け取っているeventオブジェクトから、preventDefaultメソッドを呼ぶことで
ブラウザのデフォルト動作を禁止することができます。

これで、右クリックされたときにメニューが出ないように制御できました。
しっかり動作するかは、実際にそれぞれのブラウザで確認した方が良いかと思います。(MacのChrome, Safari, Firefoxでは効くことが確認できました)

JavaScriptでcontextmenuイベントを設定する方法まとめ

今回はJavaScriptでcontextmenuを設定する方法について書きました。
まとめると、下記のようになります。

・contextmenuイベントを使うことで、右クリック時に処理をすることができた。
・contextmenuイベントはoncontextmenu属性またはaddEventListenerメソッドでイベントを追加できた。
・右クリックの禁止は、contextmenuイベントを実行して、preventDefaultを使うことで実現できた。

コメント