jQueryを使った右クリックの制御

jQueryで右クリックの処理に関して調べると、右クリック禁止やコンテキストメニュー（contextmenu）のカスタマイズに関しての記事は色々見つかりますが、右クリックイベントで任意の処理を実行する方法に関しての記事が意外に見つからなかったのでメモしておきます。

<div id="sample">ここを右クリック！！</div>

$(function() {
	$("#sample").bind('contextmenu', function() {
		//▼▼ここに処理を記述

		$(this).text('右クリックされました！！');
		$(this).css({background: '#fed9c2', border: 'solid 3px #fb5901'});

		//▲▲ここまで
		return false;
	});
});

解説

今回はとてもシンプルです。
まず、「bind」を使って、イベントとコールバック関数を紐付けます。
右クリック時のイベントは「contextmenu」となります。

	$("#sample").bind('contextmenu', function() {

そして、処理の内容を記載します。
今回はID名「sample」を右クリックしたらtext()とcss()でテキスト内容の変更＋スタイル変更をします。

		$(this).text('右クリックされました！！');
		$(this).css({background: '#fed9c2', border: 'solid 3px #fb5901'});

最後に「return false」で右クリック時にコンテキストメニュー機能を無効にします。無効にしなくても処理は実行されますが、コンテキストメニューが表示されてしまいます。

		return false;