【jQuery】画面全体および特定の要素において「右クリック禁止」にする方法
今回は、Webサイト内の画面全体および特定の要素において「右クリック禁止」にする方法を記載していきます。
使用するケース
「画像のダウンロード」や「ソースコードの確認・コピー」を容易く行えないようにしたい場合に使用されます。
サンプル
こちらから確認できます。
方法
jQueryを使って実装していきます。
※jQueryを使うための準備については、下記よりご確認ください。
「jQuery」を使うための準備と使い方について
まずは上記サンプルと同様、画像を右クリックできないようにするコードについて、説明していきます。
HTML＆CSSについては画像を表示しているだけなので、省略します。
jQueryについては下記のように記述します。
$('img').on('contextmenu', function() {
return false
});「$('img’).on('contextmenu’, function() {～｝;」について、
「セレクタ（ここではimg）が右クリックされたときに{}内の処理を行う」という命令になります。
「return false」については処理を中止するという命令となります。
上記が連動し、要素内で「右クリック」した際に処理が中止される＝右クリックが反応しないといった命令になります。
また、画面全体を右クリック禁止にする場合は、下記のような記述になります。
$(document).on('contextmenu', function() {
return false
});以上となります。