JavaScript 右クリックをキャンセル&処理を割り当てる

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

右クリックによる処理(通常はコンテキストメニュー表示)をキャンセルし、
独自の処理を割り当てるプログラムです。

Sample

ボックス内をクリックすると、押したボタンを文字列で表示します。

http://tmlife.net/examples/right-click-cancel/

Source

流れ
  1. 右クリック時の処理を割り当てたいエレメントを取得
  2. “contextmenu”イベントを追加し、その中でpreventDefaultを呼び出しデフォルトの処理をキャンセルする
  3. “mousedown”イベントを追加し、e.button内の数値に応じて処理を割り当てる
  4. 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>

    

右クリック時に自作のコンテキストを表示する処理を
実行すれば、ブラウザ内でネイティブっぽく動作させたりできます。

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT