HTML で右クリックコンテキストメニューを無効にする

Neha Imran 2023年6月20日

HTML HTML Context Menu

右クリックを無効にする考えられる理由
右クリックを無効にすることが適切でない理由
HTML イベントハンドラを使用して右クリックを無効にする
JavaScript を使用して右クリックを無効にする
画像の右クリックを無効にする

この記事では、ブラウザの右クリックコンテキストメニューに焦点を当てます。開発者がコンテキストメニューを無効にする必要があると考える理由を学び、そうすべきでない理由を観察します。

後で、Web サイトでの右クリックを無効にするためのさまざまな戦略について説明します。

右クリックを無効にする考えられる理由

ここでは、当社の Web サイトで右クリックを無効にすることを控えるべき理由を説明します。

ブロガーまたは開発者として、懸命に創造的に制作した作品が盗まれるのは望ましくありません。デザイン、画像、またはテキストの作成にかなりの時間と労力を費やした場合は、Web サイトでの右クリックを防止することで、それらを保護することができます。

右クリックを無効にする Web サイトに頻繁に遭遇します。これは素晴らしいアイデアのように見えるかもしれませんが、そうではありません。

なぜ？これについては後で説明します。まず、右クリックを無効にする必要があると考える理由を見つけてみましょう。

コンテンツを保護するには

すべてのウェブサイトには、いくつかの情報が書かれています。ライターは、自分の Web サイトに最も価値があり実用的なコンテンツを作成することに多くの時間を費やすことがあります。

自分の作品が別のアイデンティティで他の場所で公開されることを誰も望んでいません。そのため、他の Web サイトでコピーされて使用されているコンテンツの複製や利用を避けるために、右クリックを無効にしています。

画像を保護するには

ほとんどの場合、ウェブサイトの所有者は、コンテンツとして使用する優れた品質の写真を購入することに多額の投資をしています。彼らは通常、個人が無料で入手して自分のウェブサイトで使用すると、無駄に感じます。したがって、写真を保護するために右クリックを無効にします。

ソースコードを保護するには

開発者は、ユニークで革新的な Web サイトを作成するために多大な努力を払っています。視覚的に魅力的で機能的な Web サイトの HTML、CSS、および JavaScript コードを作成するには、かなりの時間と労力が必要です。

一部の Web デザイナーは、他の人の Web サイトのソースコードを盗み、いくつかの変更を加えてから、結果を自分のものとして公開します。そのため、開発者は、Web サイトでページソースの表示を無効にすることが、Web サイトのソースコードを保護するための優れた戦略であると考えています。

ユーザーの要求を満たすために

右クリックを無効にすることが、Web アプリケーションの要件である場合があります。それは、アプリケーションが対象としているオーディエンスによって異なります。

たとえば、病院のシステムは、技術的な知識があまりなく、不要なオプションをクリックしてしまう患者のために作られています。そのため、デザインをシンプルに保つために、不要なクリックはすべて無効に設定されています。

右クリックを無効にすることが適切でない理由

Web サイトで右クリックを無効にするために開発者が考えているニーズについて説明しましたが、それは効率的なアプローチではないと述べました。理由を議論しましょう。

ユーザーにとって迷惑

右クリックを無効にすることは、Web サイトのユーザーを怒らせるだけです。それはあなたのウェブサイトの使用をより複雑にし、ユーザーフレンドリーにしないだけです.

右クリックメニューは、ユーザーに多くの便利なオプションを提供します。 Chrome Web ブラウザーは、ユーザーが選択した言語に Web サイトを翻訳する 翻訳 オプションをユーザーに提供します。

Chrome の右クリックメニューにあるもう 1つの重要な機能は、デバイス間でリンクを共有することです。これにより、ユーザーは PC から携帯電話に、またはその逆に任意のリンクを直接送信できます。

セキュリティへの影響なし

右クリックを無効にすることはセキュリティではありません。ページからアイテムを簡単に保存できるようにする以外に、効果はありません。

ブラウザーで開発者モードを使用するか、JavaScript を無効にすると機能します。 Ctrl+U ショートカットキーを使用してソースコードにアクセスし、Ctrl+Shift+ を使用して検査できます。 >私。

開発者が Web サイトの安全性を高めるために右クリックを無効にすると、間違った方向に進んでいます。右クリックメニューは JavaScript を使用して無効にされており、ブラウザーで JavaScript 機能を簡単に無効にすることができます。

それは無意味です

右クリックを無効にすることでソースコードや写真が保護されると思われる場合は、もう一度考えてみてください。あなたのコンテンツやコードを盗もうと決心した人は、ブラウザのコンテキストメニューにアクセスできるかどうかに関係なく、盗みを実行します。

説明したように、これらのコンテキストメニューはユーザーに便利な機能を提供します。それらを無効にすることは、ユーザーが重要な機能を使用するのを制限するだけです。

現在、多くの人がオンラインで閲覧しており、ウェブサイトに新しいタブで開きたいリンクがある場合があります。現在、ブラウザはコンテキストメニューでこの機能を提供しており、メニューが無効になっているとユーザーはイライラします。

ただし、これにはショートカットキーがあります。 Ctrl キーを押しながらリンクをクリックすると、新しいタブに移動し、Shift キーを押しながらリンクをクリックすると、新しいウィンドウに移動します。

しかし、ユーザーがそれを知らない可能性がかなりあり、ユーザーの邪魔になります。

不要な注意を引く

右クリックを無効にすると、何を隠しているかを理解しようとする人が増えます。これは、写真やソースコードに不要な注目を集めることで裏目に出る可能性があります。

さらに、JavaScript が有効になっているブラウザーでのみ右クリックを無効にすることができます。訪問者は、ブラウザの設定で JavaScript をオフにすることにより、スクリプトを完全に無視できます。

HTML イベントハンドラを使用して右クリックを無効にする

これまで、開発者が Web サイトの右クリックコンテキストメニューを無効にする理由と、これを行うべきではないいくつかの理由について説明してきました。それでは、右クリックを無効にするいくつかの方法について説明しましょう。

HTML 要素で oncontextmenu を使用して、Web サイトの右クリックコンテキストメニューを簡単に無効にすることができます。 HTML 要素を右クリックしてコンテキストメニューを表示すると、oncontextmenu イベントがトリガーされます。

これを理解するには、以下のコードを確認してください。

<html>
    <body oncontextmenu="return false">
        <p>
            You cannot right-click here.
        </p>
    </body>
</html>

oncontextmenu を false に設定します。これは、ユーザーが Web サイトで右クリックしてコンテキストメニューを開くと、false が返され、メニューが開かないことを意味します。

body タグに oncontextmenu を配置したことにお気付きかもしれません。つまり、HTML の本文を右クリックしてもコンテキストメニューは表示されません。ページ全体で右クリックを無効にする必要はありません。

メニューを無効にする唯一の目的が画像の保護である場合は、image タグに oncontextmenu を追加するだけです。

JavaScript を使用して右クリックを無効にする

JavaScript を使用して同じ目的を達成することもできます。以下のコードをチェックして、JavaScript を使用して目的の機能を実現する方法を確認してください。

<html>
    <head>
        <script>
            document.addEventListener('contextmenu', event => event.preventDefault());
        </script>
    </head>
    <body>
        You cannot right-click here.
    </body>
</html>

addEventListener() 関数は、指定された要素にイベントハンドラーを追加します。最初のパラメーターはイベントの種類 (HTML DOM イベントと同様) で、2 番目のパラメーターはイベントが発生したときに呼び出される関数を指定します。

イベントがキャンセル可能な場合、preventDefault() メソッドはイベントのデフォルトアクションの実行を停止します。

画像の右クリックを無効にする

この方法では、Web サイトの画像の保護のみに焦点を当てます。上で説明したように、ページ全体で右クリックを無効にすることは、ユーザーに良い印象を与えません。

JavaScript の助けを借りて、これを簡単に行うことができます。 HTML ページの本文全体ではなく、HTML の image タグのみをターゲットにすることができます。

以下のコードをチェックして、その方法を理解してください。

<html>
    <head>
        <script>
            document.addEventListener("contextmenu", function(e){
                if (e.target.nodeName === "IMG") {
                    e.preventDefault();
                }
            }, false);
        </script>
    </head>
    <body>
        <img src="/img/DelftStack/logo.png"/>
    </body>
</html>

コードを詳しく見てみましょう。

この時点で、JavaScript の addEventListener() 関数を理解していると思います。関数のパラメーターについては前に説明したので、最初のパラメーターで指定されたイベントが発生したときにトリガーされる関数を表す 2 番目のパラメーターを見てみましょう。

イベントが発生すると、イベントを引き起こす要素はエミッター、ターゲットと呼ばれます。つまり、ターゲットは特定のイベントをトリガーした DOM 要素を返します。 nodeName 関数は、要素のノード名を返します。

結論として、e.target.nodeName は、ユーザーが右クリックした要素名を返します。コードでは、クリックされた要素名が IMG の場合、最初のパラメーターで指定されたイベントを実行しないことを検証しました。