mizdra's blog

ぽよぐらみんぐ

右クリック長押しでコンテキストメニュー

便利なものを書いてみる。
JavaScriptでコードを書いているとき、要素をクリックしたら関数を実行。
...なんてことをしたい場合があります。
左クリックいいのですが、右クリックは少し問題があります。

通常、右クリックをすると、
コンテキストメニュー(以下「メニュー」)と呼ばれるテキストボックスが画面上に表示されます。

コンテキストメニュー
↑Google Chromeでのコンテキストメニュー


右クリックでイベントを実行させる際、普段はこのメニューを開かないようにしていますが、これでは不便です。
では、長押しという概念を使って、メニューとイベントを両立させてみましょう。

サンプル(jsdo.it)

上記のリンク先のように、jqueryの「mousedown(fn)」と「mouseup(fn)」を使って長押しの処理をします。
ボタンが押されたときに「mousedown(fn)」が最初に実行され、
離したときに「mouseup(fn)」が実行されます。

二つの関数の引数の「e」には、クリック時のデータが入っていて、
.buttonで、クリックしたボタンコードが取得できます。
「e.button」が0なら左クリック、1ならホイールクリック、2なら右クリックとなります。

「mousedown(fn)」では、「setTimeout(func,msec,arg1,arg2)」(以下「タイマー」)で0.5秒後(500ms)に長押しのメッセージ表示と、
メニューを開く命令を予約しています。
また、タイマー内で「flug」という長押し判定用の変数をtrueにする処理も予約しておきます。

一方、「mouseup(fn)」では、flugがtrueなら長押し、偽なら短押しという判定をしていて、
右クリックの短押しの場合はメニューを開かないようにしています。

このようにすることによって、右クリック短押しはメニューを開かず、長押しのみ開かせることができます。
ソースの方は以下です。(詳しいものはjsdo.itで見て下さい)

ここをクリック

・クリック判定(短押しor長押し)
$('#box').mousedown(function(e){ //マウスボタンが押された瞬間
    flug = false;
    $('#text').html("
"); //要素を空にする clearTimeout(timer); //同時押しへの対応 timer = setTimeout(function(){ //0.5秒で長押し $('#text').text("長押し"); flug = true; }, 500); }); $('#box').mouseup(function(e){ if(flug){ //長押し switch(e.button){ case 0: //左クリック break; case 1: //ホイールクリック break; case 2: //右クリック document.getElementById('box').oncontextmenu = function(){ return true; //コンテキストメニューを開く }; } }else{ //短押し $('#text').text("短押し"); clearTimeout(timer); switch(e.button){ //短押し case 0: //左クリック break; case 1: //ホイールクリック break; case 2: //右クリック document.getElementById('box').oncontextmenu = function(){ return false; //コンテキストメニューを開かせない }; } } });


んー。疲れたー。
jsdo.itの方の閲覧数もいい感じに伸びてるし、結構需要ありそう。
またこういうものが書けたらいいな。

あと、jsdo.itで「HTML5 実力テスト」のHTML/CSSJavaScriptコースの二つを受けました。
前者が39点(D判定)、後者が41点(C判定)と、まあまあでした。 もっと勉強しないと...