jQueryで右クリックを禁止させる方法

Webサイト制作の際にクライアントからの要望などや
画像を簡単に保存させたくない時など、
右クリック動作を禁止させることがたまにあるかと思います。

右クリック禁止はJavaScriptで簡単に実装できますが
jQueryを使うと、より簡単に実装することができたので
メモ書きとして紹介してみます。

まずは単純にページ全体に対して
右クリック禁止させる方法は以下のような記述になります。

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

もしくは、

◆SCRIPT
$(function(){
	$('body').on('contextmenu',function(e){
		return false;
	});
});

「contextmenu」が右クリック動作にあたるようなので
その動作を無効化します。

対象の範囲を変えることで
画像のみや特定の範囲のみ、右クリックを禁止させる
ということもできるかと思います。

画像のみ右クリック禁止の場合

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

◆SCRIPT
$(function(){
	$('.box').on('contextmenu',function(e){
		return false;
	});
});

この様な感じでjQueryでは簡単に
右クリック禁止を実装することができます。

今回のサンプルスクリプトでは「.on」を使っていますが
jQuery1.7以前のバージョンでは「.bind」でも実装可能です。
※「.bind」は1.7以降は非推奨

jQueryで右クリック禁止を実装させる際に是非。。。