【jQuery】画面全体および特定の要素において「右クリック禁止」にする方法

2020-04-08

今回は、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
});

以上となります。