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

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

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;
	});
});

クラス「.box」エリアのみ右クリック禁止の場合

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

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

【参考記事】8 awesome JQuery tips and tricks | CatsWhoCode.com

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

【参考記事】jQueryで読み込み時とリサイズ時の処理を合わせて書く方法 | CREAMU

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

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (3)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

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

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner