Webページの右クリックを無効にするにはどうすればよいですか？

316

JavaScriptを使用せずにWebページの右クリックを無効にできますか？ほとんどのブラウザではユーザーがJavaScriptを無効にできるため、これをお願いします。

そうでない場合、JavaScriptを使用して右クリックを無効にするにはどうすればよいですか？

javascript 
— ヴィネイ・パンディ
ソース
130
右クリックを無効にすることはセキュリティではなく、単にユーザーを困らせるだけです。これを無効にできないブラウザは無意味ですが、そもそもそれを行うサイトはひどいものです。
— Dan Olson、
17
コンテンツを取得したくない場合は、ウェブに投稿しないでください。:)現代のブラウザは、右クリックを無効にするJavaScriptの機能をオーバーライドすることもできます。Firebug / Web Dev Toolbarのようなツールは、保護を役に立たなくします。
— epascarello、2009
7
右クリックを再度有効にする小さなchrome / greesemonkeyユーザースクリプトを次に示します。dl.dropbox.com/ u / 464119 / Programming / javascript / …
— ripper234
31
本当に@DanOlson ...独自の右クリックメニューをコーディングしたい場合はどうしますか？cPanelにあるようなもの。
— Codesmith、2013
30
@epascarelloキオスク端末のように、右クリックを無効にすることが不可欠である特定のケースがあります。ユーザーが実際にそれを必要とせず、そこにそのままにしておくと実際にユーザーを困らせるかもしれません
— Aram

回答:

525

JavaScriptでこれを行うには、「contextmenu」イベントのイベントリスナーを追加し、preventDefault()メソッドを呼び出します。

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

言われていること：それをしないでください。

どうして？それは迷惑なユーザー以外に何も達成しないからです。また、多くのブラウザには、右クリック（コンテキスト）メニューを無効にできないようにするセキュリティオプションがあります。

なぜしたいのかわからない。そのようにしてソースコードや画像を保護できるという見当違いの信念がなければ、もう一度考えてみてください。

— クレタス
ソース
86
oncontextmenu="return false"たとえばキャンバス上など、体以外のものを使用することは理にかなっています。
— AdrienBrault 2013年
62
私たちはキオスクマシンに展開しており、ユーザーがページを更新できないようにこの方法を選択しました。
— トッドホルスト
21
@ToddHorstその場合、UIなしのブラウザーの特別な「キオスク」バージョンを使用します。これは通常、コンテキストメニューなしでも使用できます:)
— mihi
17
タッチ対応システムは、ロングタップなどの特定のタッチイベントを右クリックにマッピングする場合があります（これにより、コンテキストメニューが開きます）。ただし、この動作は望ましくない場合があり、それを防ぐ唯一の意味のある方法は、コンテキストメニューを完全に無効にすることです。
— ORマッパー2014
58
古いスレッドですが、誰かがそれを読んだ場合、すべてのWeb開発者が自分でWebサイトを作成するわけではありません。顧客があなたに来て、右クリックを無効にするように要求します。
— ちゅうちょ
122

しない

しないでください。

何をしても、ユーザーがWebサイトのすべてのデータに完全にアクセスできないようにすることはできません。コード化したJavascriptは、ブラウザーでJavaScriptをオフにする（またはNoScriptのようなプラグインを使用する）だけで、疑わしくレンダリングできます。さらに、サイトの「ソースを表示」または「ページ情報を表示」する（またはwgetを使用する）機能を無効にする方法はありません。

努力する価値はありません。実際には機能しません。それはあなたのサイトをユーザーに対して積極的に敵対的にします。彼らはこれに気づき、訪問を停止します。これを行うメリットはなく、無駄な作業とトラフィックの損失のみです。

しないでください。

更新：この小さなトピックは、時間の経過とともにかなり物議を醸しているようです。それでも、私はこの質問に対するこの回答を待ちます。時々正しい答えは文字通りの応答ではなくアドバイスです。

カスタムコンテキストメニューを作成する方法を見つけることを期待してこの質問につまずいた人は、次の質問など、他の場所を探す必要があります。

— くさび
ソース
230
わあ、これは受け入れられた答えだとは信じられません。特定の条件下でWebアプリケーションの右クリックを削除するには、多くの有効な使用法があります。
— GAgnew
84
実際の答えは次のとおりです。<body oncontextmenu="return false;">
— SebastiánGrignoli
18
@GAgnew：コンテキストメニューを置き換える有効な使用法があります。無条件に右クリックを無効にする有効なユーザーはいません
— ThiefMaster
80
ユーザーがHTML5ビデオゲームを作成したい場合は、右クリックを無効にすると非常に便利です。通常、これは望ましいことではありませんが、適切なコンテキストなしで「しないでください」と言ってもあまり役に立ちません。
— RobsonFrança12年
51
私からも-1。この答えは役に立ちません。右クリックを無効にする理由はたくさんあります。たとえば、病院でフロントデスクで使用するWebアプリケーションを作成しましたが、ユーザーは技術的に精通していません。アプリケーションはWebブラウザーで実行されていますが、右クリックしたときにすべてのメニューオプションが表示される理由を理解していません。アプリケーションの一部だと思った人から、オプションの選択肢を尋ねるたくさんの質問が寄せられました。その場合、それらを無効にすることは理にかなっており、他の多くのWebアプリケーションでもそうです。
— ニコラス
66

元の質問は、ユーザーがJavaScriptを無効にできる場合に右クリックを停止する方法に関するものでした。これは悪質で悪そうなため（否定的な応答）、すべての複製はここにリダイレクトされます。

たとえば、HTML5ゲームで右クリックボタンを使用するようなものです。これは上記のインラインコードで行うことができます。

document.addEventListener("contextmenu", function(e){
    e.preventDefault();
}, false);

ただし、ゲームを作成している場合は、右クリックボタンでcontextmenuイベントが発生することに注意してください。ただし、通常のmousedownイベントとmouseupイベントも発生します。そのため、イベントを起動しているのが左（=== 1）、中央（=== 2）、または右（=== 3）のマウスボタンであるかどうかを確認するには、イベントのwhichプロパティを確認する必要があります。

jQueryの例を次に示します。マウスの右ボタンを押すと、3つのイベント（mousedownイベント、contextmenuイベント、およびmouseupイベント）が発生することに注意してください。

// With jQuery
$(document).on({
    "contextmenu": function(e) {
        console.log("ctx menu button:", e.which); 

        // Stop the context menu
        e.preventDefault();
    },
    "mousedown": function(e) { 
        console.log("normal mouse down:", e.which); 
    },
    "mouseup": function(e) { 
        console.log("normal mouse up:", e.which); 
    }
});

したがって、ゲームでマウスの左ボタンと右ボタンを使用している場合は、マウスハンドラーでいくつかの条件付きロジックを実行する必要があります。

— スピーカー氏
ソース
dom.event.contextmenu.enabledFirefoxで有効にした場合mousedown、mouseupイベントが発生contextmenuしなくても、イベントは発生しますか？
— robertc
43

ユーザーが右クリックを試みるたびにメッセージで警告することを気にしない場合は、これをbodyタグに追加してみてください

<body oncontextmenu="return false;">

これにより、コンテキストメニューへのすべてのアクセスがブロックされます（マウスの右ボタンからだけでなく、キーボードからも）。

ただし、他の回答で述べたように、右クリック無効化機能を追加しても意味がありません。ブラウザの基本的な知識があれば誰でもソースを表示し、必要な情報を抽出できます。

— by0
ソース
はい。ただし、ブラウザの基本的な知識が不足していることに気付いている人と簡単に画像を共有したい場合があります。右クリックを無効にするのは100％万能というわけではありませんが、その人物に見せるために画像を数分だけ投稿する場合は、かなり安全です。
— WillO 2014年
タッチ対応システムは、ロングタップなどの特定のタッチイベントを右クリックにマッピングする場合があります（これにより、コンテキストメニューが開きます）。ただし、この動作は望ましくない場合があり、それを防ぐ唯一の意味のある方法は、コンテキストメニューを完全に無効にすることです。
— またはMapper、2014
@WillO：似たようなユースケースがありますが、参考までに、ユーザーは常にスクリーンショットを使用します。
— Hassan Baig 2018
28

あなたがjqueryファンなら、これを使ってください

    $(function() {
        $(this).bind("contextmenu", function(e) {
            e.preventDefault();
        });
    });
— ヴィシュヌ・ビクラマン
ソース
4
これは理由もなくjQueryを使用しています。これは、これから1.5年前に投稿されたSpeaker氏の回答にある単一のJavaScriptステートメントとまったく同じです。ちなみに、その答えにはjQueryソリューションも含まれていますが、これも必要ありません。この回答に賛成した人は、これが何をするかさえ知っていますか？これはなぜドキュメント準備イベントが停止してコンテキストメニューが表示されなくなるのを待つのですか？これthisが準備完了イベント内で使用されるのはなぜですか？のbind代わりになぜ使用するのonですか？Ugh ...
— Rudey
20

まず、クライアント側の機能を使用せずにこれを実現することはできません。ここでJavaScriptが実行されます。

次に、エンドユーザーがサイトから消費できるものを制御しようとしている場合は、その情報の表示方法を再考する必要があります。画像には、ブラウザを使用せずにHTTP経由で取得できるパブリックURLがあります。

認証により、誰がどのリソースにアクセスできるかを制御できます。

画像に埋め込まれた透かしは、画像が特定の人物/会社からのものであることを証明できます。

結局のところ、リソース管理は本当にユーザー/ゲストの管理です。

インターネットの最初のルール、それを採用したくない場合は、公開しないでください！

インターネットの2番目のルールです。これを採用したくない場合は、インターネットに配置しないでください。

— ウェイン
ソース
20

人々があなたの画像をダウンロードできないようにすることを目的としている場合、ほとんどの人が言っているように、右クリックを無効にすることはほとんど効果がありません。

あなたが画像を保護しようとしていると仮定すると、代替方法は次のとおりです-

Flash Playerを使用すると、ユーザーはそのようにダウンロードすることはできませんが、画面キャプチャを簡単に実行できます。

さらに扱いやすくしたい場合は、透明な画像を含むdivの背景を画像にします。

<div style="background-image: url(YourImage.jpg);">
   <img src="transparent.gif"/>
</div>

画像の偶然の盗難を防ぐには十分です（サンプルについては以下を参照してください）。しかし、これらすべての手法と同様に、htmlの基本的な理解で敗北するのは簡単です。

— 恐怖症
ソース
2
さらにコードを難読化するために、画像をbase64としてロードすることもできます。
— Miguel Bartelsman、2016
16

JavaScriptを使用せずに、求めていることを達成することはできません。使用することを選択できるその他のテクノロジーは、ブラウザに送信されるサーバー側のWebページを作成するのにのみ役立ちます。

単純に良い解決策はありませんし、JavaScriptなしでは解決期間もありません。

— アンソニー
ソース
1
そしてそれでも、バイパスするのは簡単なことは言うまでもなく、ユーザーにとっては迷惑です。
— Manos Dilaverakis、2009
1
「右クリックが無効になっています」とモーダルポップアップが表示され、右クリックメニューを閉じると表示されるページを見たことがあります。また、トラックパッドを使用してスクロールしたときにもメッセージが表示されるため、非常に煩わしいものです。
— ピートカーカム
1
ええ、それは通常、人々がすでにハードドライブにある画像を「盗む」のを防ぐためですが、それだけでコンテキスト検索を使用できないようにするので特に迷惑です：addons.mozilla.org/en-US/firefox/addon/240。それらのろくでなし...
— カルバン
2
これに対するほとんどすべての答えが「確かに、javascriptを使用してください！」
— Charles Wood
14

ユーザーが画像を単に保存できないようにすることが目的の場合は、クリックしたターゲットが画像かどうかを確認することもできます。その場合は、右クリックのみを無効にしてください。したがって、右クリックを他の目的に使用できます。上記のコードから取得：

document.addEventListener("contextmenu", function(e){
    if (e.target.nodeName === "IMG") {
        e.preventDefault();
    }
}, false);

これは単に画像を保存する最も簡単な方法を取り除くためですが、それでも実行できます。

— アンドリュー
ソース
これは私の意見では最良の方法です。Webユーザーとして、右クリック機能は時々便利ですが、簡単でシンプルな（そしてもちろん、簡単に打ち勝つ）ソリューションとして迷惑をかけることなく機能します。
— ベン・
9 
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<script type='text/javascript'>//<![CDATA[ 
$(function(){
$('img').bind('contextmenu', function(e){
return false;
}); 
});//]]>  
</script>
</head>
<body>
    <img src="http://www.winergyinc.com/wp-content/uploads/2010/12/ajax.jpg"/>
</body>

— aravind3
ソース
— robertc
2
@ aravind3私はあなたの例を使用し、それは御馳走を働かせます！画像はまだクリック可能であり、想定どおりに機能しますが、ダウンロードできません。右クリックを無効にしたかったのは、画像だけを必要とし、すぐに離れた訪問者が直帰率に影響を与えているためです。少なくともこの方法では、直帰率はそれほど悪くはありません。それを理解するのに1〜2分かかる可能性があるからです:) Cheers aravind3 !!!!
— coolydude 2013
6

以下のようにしてください（Firefoxでも動作します）： 

$(document).on("contextmenu",function(e){

     if( e.button == 2 ) {
         e.preventDefault();
          callYourownFucntionOrCodeHere();
     }
return true;
});
— nntona
ソース
5

このコードを<head>ページのタグに挿入します。

<script type="text/javascript"> 
function disableselect(e){  
return false  
}  

function reEnable(){  
return true  
}  

//if IE4+  
document.onselectstart=new Function ("return false")  
document.oncontextmenu=new Function ("return false")  
//if NS6  
if (window.sidebar){  
document.onmousedown=disableselect  
document.onclick=reEnable  
}
</script>

これにより、JavaScriptが有効な場合にのみ、Webページ全体の右クリックが無効になります。

— テハス
ソース
これはFirefoxでは機能せず、フォーム入力の入力選択を無効にします:(
— ALWAN
5

私はこのコードを使用して、どのWebページでも右クリックを無効にしていました。このコードを使用できます

jQuery(document).ready(function(){
  jQuery(function() {
        jQuery(this).bind("contextmenu", function(event) {
            event.preventDefault();
            alert('Right click disable in this site!!')
        });
    });
});
<html>
  <head>
    <title>Right click disable in web page</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    You write your own code
  </body>
</html>
スニペットを展開

— アルビンダクマール
ソース
4

もちろん、ここの他のすべてのコメントのように、これは単に機能しません。

私はかつて、クライアントの単純なJavaアプレットを作成しました。これにより、画像のキャプチャをスクリーンキャプチャを介して実行する必要がありました。同様の手法を検討したいと思うかもしれません。制限内で機能しましたが、それでも時間の無駄でした。

— クルアチャン
ソース
4 
    <script>
        window.oncontextmenu = function () {
            console.log("Right Click Disabled");
            return false;
        }
    </script>
— 安部
ソース
3

これを試して

<script language=JavaScript>
//Disable right mouse click Script

var message="Function Disabled!";

function clickIE4(){
if (event.button==2){
alert(message);
return false;
 }
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

</script>
— ディペッシュ
ソース
3

Webページの右クリックを無効にするのは簡単です。この作業を行うJavaScriptコードは数行しかありません。以下はJavaScriptコードです。

$("html").on("contextmenu",function(e){
   return false;
});

上記のコードでは、タグを選択しています。この3行のコードを追加すると、Webページの右クリックが無効になります。

ソース：jQueryを使用してWebページでの右クリック、コピー、切り取りを無効にする

— ファルケ・アハメド・モリック
ソース
2

私は遅れていることを知っていますが、これから提供する回答について、いくつかの仮定と説明を作成したいと思います。

右クリックを無効にできますか

JavaScriptを使用せずにWebページの右クリックを無効にできますか？

はい、JavaScriptを使用することで、発生するイベントを無効にでき、ほとんどの場合、JavaScriptでのみ無効にできます。必要なのは次のとおりです。

  1. 機能するハードウェア

  2. キーコードについて学ぶことができるウェブサイトまたはどこか。必要になるから。

ここで、Enterキーを押すのをブロックしたいとします。コードは次のとおりです。 

function prevententer () {
 if(event.keyCode == 13) {
  return false;
 }
}

右クリックするには、次を使用します。 

event.button == 2

の代わりにevent.keyCode。そして、あなたはそれをブロックします。

ほとんどのブラウザでは、ユーザーがJavascriptで無効にできるため、これについて質問します。

そうです、ブラウザはあなたに使用JavaScriptを許可し、JavaScriptがあなたのためにすべての仕事をしてくれます。何もセットアップする必要はなく、headにscript属性が必要です。

なぜそれを無効にすべきではないのですか？

その主な答えは、ユーザーが気に入らないことです。誰もが自由を必要としています。誰もブロックしたり無効にしたりすることを望んでいません。数分前にサイトにいたのですが、右クリックをブロックしていて、なぜだと思いましたか。ソースコードを保護する必要がありますか？次に、ここctrl+shift+Jを開き、タブにConsole移動しHTML-codeます。私を止めてください。これにより、アプリにセキュリティレイヤーが追加されることはありません。

右クリックには、コピー、貼り付け、Googleで「テキスト」（Chrome内）を検索するなど、多くの便利なメニューがあります。そのため、ユーザーは多くのキーボードショートカットを覚えるのではなく、簡単にアクセスできるようにしたいと考えています。誰でも、コンテキストをコピーしたり、画像を保存したり、好きなことをしたりできます。

ブラウザはマウスナビゲーションを使用します。のような一部のブラウザOperaには、マウスのナビゲーションを使用して、あなたはそれを無効にした場合ので、ユーザーは間違いなくあなたのユーザーインターフェイスとスクリプトを憎むでしょう。

それが基本でしたので、ソースコードの保存についてもう少し説明しますが、それをあなたの質問の答えにしましょう。

キーコードへの参照：

キーとマウスボタンのコード：

http://www.w3schools.com/jsref/event_button.asp

https://developer.mozilla.org/en-US/docs/Web/API/event.button（ユーザーにも喜ばれるでしょう）。

右クリックを無効にしない理由：

http://www.sitepoint.com/dont-disable-right-click/

— アフザールアフマドジーシャン
ソース
1

JavaScript：

document.getElementsByTagName("html")[0].setAttribute("oncontextmenu", "return false");
— زياد
ソース
0

重要な注意：そのような防止を許可するかどうかは、ブラウザーとOSに依存します！

あなたはそれをすべきですか？ いいえ。それはユーザーを妨げることはありませんが、ユーザーを困らせるだけだからです。

使えますか？ はい。例：ポップアップメニューをカスタマイズしたい一部のWebアプリ、ユーザーが誤って右クリックしたときに迷惑になるゲーム内など。

Ubuntuの16.04でクローム（V65）は=あなたは、CAN、右クリックを無効にします。

Mac OS 10.11のChrome（v65）= 右クリックを無効にすることはできません。

Windows 7のChrome（v65）= 右クリックを無効にすることはできません。

Mac OSの10.11でのFirefox（V41）は=あなたは、CAN、右クリックを無効にします。

Windows 7のFirefoxの（V43）は=あなたは、CAN、右クリックを無効にします。

// Vanilla JS way
document.addEventListener('contextmenu', function(e){
    e.preventDefault();
});

// jQuery way
$(document).bind('contextmenu', function(e) {
    e.preventDefault();
});
— evilReiko
ソース
0

考慮すべきいくつかのこと：

Chromeストアに「右クリックを有効にする」などのブラウザプラグインが存在するのは、そのためであり、それらを回避することはできません。とにかく、ブラウザでコンテンツを表示するには文字通りダウンロードする必要があるため、コンテンツのダウンロードを阻止するためにあなたができることは文字通り何もありません。人々は試みますが、常にそこにあります。

一般に、コンテンツを公開しない場合は、オンラインにしないでください。

また、右クリックできないことはアクセシビリティの問題であり、多くの場合、視覚障害者や身体障害者や高齢者に対する違法な差別になります。現地の法律を確認してください。しかし、米国では、視覚障害のある盲人や高齢者が法的に保護されている階級として、連邦ADAの形で積極的に法律に違反しています。

したがって、これを実行して多くの時間と労力を浪費する代わりに、これを実行しようとすることさえしないでください。それは単にあなたの会社を訴えさせたり、コンプライアンス監査に失敗させるかもしれません。

— 正直な
ソース
0

要素の検査オプションを無効にするためにこのコードを試してください

    jQuery(document).ready(function() {
    function disableSelection(e) {
        if (typeof e.onselectstart != "undefined") e.onselectstart = function() {
            return false
        };
        else if (typeof e.style.MozUserSelect != "undefined") e.style.MozUserSelect = "none";
        else e.onmousedown = function() {
            return false
        };
        e.style.cursor = "default"
    }
    window.onload = function() {
        disableSelection(document.body)
    };

    window.addEventListener("keydown", function(e) {
        if (e.ctrlKey && (e.which == 65 || e.which == 66 || e.which == 67 || e.which == 70 || e.which == 73 || e.which == 80 || e.which == 83 || e.which == 85 || e.which == 86)) {
            e.preventDefault()
        }
    });
    document.keypress = function(e) {
        if (e.ctrlKey && (e.which == 65 || e.which == 66 || e.which == 70 || e.which == 67 || e.which == 73 || e.which == 80 || e.which == 83 || e.which == 85 || e.which == 86)) {}
        return false
    };

    document.onkeydown = function(e) {
        e = e || window.event;
        if (e.keyCode == 123 || e.keyCode == 18) {
            return false
        }
    };

    document.oncontextmenu = function(e) {
        var t = e || window.event;
        var n = t.target || t.srcElement;
        if (n.nodeName != "A") return false
    };
    document.ondragstart = function() {
        return false
    };
});
— アガン116
ソース
1
このコードスニペットをありがとうございます。このコードスニペットは、短期間の限定的なヘルプを提供する場合があります。適切に説明すると、なぜこれが問題の優れた解決策であるかを示すことにより、長期的な価値が大幅に向上し、他の同様の質問を持つ将来の読者にとってさらに役立つでしょう。回答を編集して、仮定を含めて説明を追加してください。
— Toby Speight
これは、Chrome で非常に簡単にオーバーライドできます。プロフィール写真の横にある3つのドットをクリックし、[その他のツール]> [開発者ツール]
— sportzpikachu
-1

この機能を使用して、右クリックを無効にします。左クリックを無効にして、checking 1 and 0対応する

document.onmousedown = rightclickD;
            function rightclickD(e) 
            { 
                e = e||event;
                console.log(e);
                if (e.button == 2) {
                //alert('Right click disabled!!!'); 
                 return false; }
            }
— 暗号解読者
ソース
Javascriptを使用してHTMLがすでに行っていることを行うのは悪いエンジニアリングで無駄です
— honestduane
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.