2017/8/4更新

jQueryで右クリックを禁止する方法：on('contextmenu')

jQueryで右クリックを禁止する方法について説明します。JavaScriptでも記述は可能ですが、jQueryを使って更に簡単に記述する事が出来ます。

右クリックを禁止することで、画像の保存をされにくくすることなどができます。

＊右クリックを禁止しても、画像の保存はできます。

on('contextmenu')で右クリックを禁止にする

on()は指定したイベントが発生した時に、続く処理を実行するものです。右クリックのイベントはjQueryでは contextmenuというイベントになります。

右クリックがされイベントが発生した時に、 return false;とすることで右クリックした時のメニューが表示されなくなります。

全体に対して右クリックを禁止する場合は、以下のように documentオブジェクトを指定します。

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

$(function() {

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

return false;

});

画像のみ右クリック禁止にする場合、以下のようにimg要素を指定します。さらに、「画像の右クリックは禁止です」という文言をアラートで表示するようにします。

$(function() {
    $("img").on('contextmenu', function(e) {
        alert('画像の右クリックは禁止です');
        return false;
    });
});

$(function() {

$("img").on('contextmenu', function(e) {

alert('画像の右クリックは禁止です');

return false;

});

今回は、サンプルとして以下の画像のみ右クリック禁止に設定しました。この画像を右クリックしてみるとアラートが表示され右クリックのメニューが表示されないのがわかります。

このほかにも指定したクラスやIDごとに右クリックを禁止することもできます。

ただし、右クリックを禁止しても画像を絶対に保存できなくなる訳ではなく、むやみに右クリック禁止を使うことはユーザー体験を損ねることもあるので使い所には気をつけてください。

jQuery