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