JavaScript 右クリックをキャンセル&処理を割り当てる
右クリックによる処理(通常はコンテキストメニュー表示)をキャンセルし、
独自の処理を割り当てるプログラムです。
Sample
ボックス内をクリックすると、押したボタンを文字列で表示します。
http://tmlife.net/examples/right-click-cancel/Source
流れ- 右クリック時の処理を割り当てたいエレメントを取得
- “contextmenu”イベントを追加し、その中でpreventDefaultを呼び出しデフォルトの処理をキャンセルする
- “mousedown”イベントを追加し、e.button内の数値に応じて処理を割り当てる
- e.button内の数値が2だった場合、右クリックなので、ここで独自の処理を割り当てる
下記はサンプルのソース全体です。細かいことはscriptタグ内のコメントで書いています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Right Click Cancel</title>
<style>
#box {
color: #fff;
margin: 10px;
width: 256px;
height: 256px;
background-color:#00f;
text-align: center;
vertical-align: middle;
}
#message {
line-height: 256px;
font-size: 2em;
font-weight: bold;
}
</style>
<script type="text/javascript">
window.onload = function()
{
// クリック時に反応させたいエレメントを取得
var box = document.getElementById("box");
// メッセージ表示用エレメント
var message = document.getElementById("message");
// コンテキストメニューを表示するイベント時のコールバック
box.addEventListener("contextmenu", function(e){
// デフォルトイベントをキャンセル
// これを書くことでコンテキストメニューが表示されなくなります
e.preventDefault();
}, false);
// エレメントをクリックした際に呼ばれる処理
box.addEventListener("mousedown", function(e){
var str = "";
// 押しているボタンに応じて処理を切り替える
// ここで2の時に独自のコンテキストメニューを表示したりする
switch (e.button) {
case 0 :
str = "left click";
break;
case 1 :
str = "middle click";
break;
case 2 :
str = "right click";
break;
}
// メッセージ表示
message.innerHTML = str;
}, false);
}
</script>
</head>
<body>
<h1>Right Click Cancel</h1>
<p>
右クリックをキャンセルし、自分で登録した関数を呼ぶ。<br />
ボックス内をクリックすると、押したボタンを文字列で表示します。<br />
右クリックを押してもコンテキストメニューが表示されないのが分かると思います。<br />
</p>
<div id="box">
<span id="message">please click</span>
</div>
</body>
</html>
右クリック時に自作のコンテキストを表示する処理を
実行すれば、ブラウザ内でネイティブっぽく動作させたりできます。
自分用JavaScriptメモ
「JavaScript 右クリックをキャンセル&処理を割り当てる」
http://ow.ly/3d9a2
#JavaScript
JavaScript 右クリックをキャンセル&処理を割り当てる | TM Life http://t.co/qnMY3rWd