JavaScriptやjQueryを使ってサイト上での右クリックを禁止する方法

JavaScriptやjQueryを使って、サイト上で右クリックができないようにする方法をご紹介いたします。

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

JavaScriptで右クリックを禁止するには、bodyに「oncontextmenu=’return false’」を追加してあげます。

1	`<body` `oncontextmenu="return false">`

右クリックした時に警告メッセージを表示したい場合は、以下のようにします。

<body oncontextmenu="alert('右クリックは禁止ですぜ！');return false">

右クリックはOKだけど、コピーは無効化したいという場合は、以下のようにします。

1	`<body` `oncopy="return false;">`

「oncopy=”return false;”」を追加することで、右クリックした時に[コピー]が出てこなくなります。

jQueryを使って右クリックを禁止する場合、以下のように記述します。

$(function(){
 $(document).on('contextmenu',function(e){
 return false;
 });
});

画像だけ右クリックを禁止したい場合は、以下のようにします。

$(function(){
 $('img').on('contextmenu',function(e){
 return false;
 });
});

右クリックを禁止は、よくブログのパクリ防止として紹介されていますね。右クリックを禁止したりコピーメニューを無効化しても、いくらでもすり抜けることはできますが、一定の効果はあるかもしれません。

ちなみに、CSSにはuser-selectというプロパティがあり、user-selectを使うとテキストの選択を無効化することができます。

body{
user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-user-drag:none;
-khtml-user-drag:none;
}

JavaScriptやjQueryを使いたくないという場合は、CSSでの対策もご検討ください。