javascript - jqueryの右クリックでdbclick()を追加する方法

Question

こんにちは、Google マップはズームインおよびズームアウトする必要があるため、右クリックで dblclick() を使用したいと考えています。それを行う方法はありますか。私は dblclick を書きましたが、今は左クリックだけで動作します。これを行う方法についての指針。これが私のコードです

         $("div#demo1").dblclick(function(e) {
            //alert(e.getElementById());

            if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
                alert("Left Mouse Button was clicked on demo1 div!");
                $("div.window").animate({
                'height':'+=20', 'width':'+=20'
                },0,function(){
                    jsPlumb.repaintEverything();
                    jsPlumb.repaintEverything();
                });
                // Left mouse button was clicked (all browsers)
            }
            else if( (!$.browser.msie && e.button == 2) || ($.browser.msie && e.button == 3) ) {
                alert("right click double");
            }
        });

score 10 · Accepted Answer

タイマーをいじったり、クリック数を手動で追跡したりせずに、ダブル右クリックを検出できる別の方法があります。またはイベント.detailでイベントオブジェクトのプロパティを使用する。最近発生したクリック数を示すクリック数を保持します。ダブルクリックだったら。mouseupmousedown.detail.detail === 2

// suppress the right-click menu
$('#target').on('contextmenu', function (evt) {
    evt.preventDefault();
});

$('#target').mouseup(function (evt) {
  if (evt.which === 3) { // right-click
    /* if you wanted to be less strict about what
       counts as a double click you could use
       evt.originalEvent.detail > 1 instead */
    if (evt.originalEvent.detail === 2) { 
      $(this).text('Double right-click');
    } else if (evt.originalEvent.detail === 1) { 
      $(this).text('Single right-click');
    }
  }
});

evt.originalEvent.detailだけではなく、プロパティにアクセスするためにを使用していることに気付くかもしれません.detail。これは、jQuery がを含まない独自のバージョンのイベントオブジェクトを提供するため.detailですが、ブラウザがを介して返した元のイベントオブジェクトにアクセスできます.originalEvent。jQuery の代わりに純粋な JavaScript を使用している場合は、evt.detail.

これが実際の例です。

score 6 · Accepted Answer

それを行う実際の方法はありません。IIRCが300msであるダブルクリックのデフォルトタイマーを使用してエミュレートできます。

function makeDoubleRightClickHandler( handler ) {
    var timeout = 0, clicked = false;
    return function(e) {

        e.preventDefault();

        if( clicked ) {
            clearTimeout(timeout);
            clicked = false;
            return handler.apply( this, arguments );
        }
        else {
            clicked = true;
            timeout = setTimeout( function() {
                clicked = false;
            }, 300 );
        }
    };
}

$(document).contextmenu( makeDoubleRightClickHandler( function(e) {
    console.log("double right click" );
}));

http://jsfiddle.net/5kvFG/2/

score 1 · Accepted Answer

右クリックは、javascript（コンテキストメニュー）の範囲外のユーザーエージェントにとって意味があるため、踊り回る必要があります。

まず、ターゲット要素のコンテキストメニューを無効にする必要があります。

document.getElementById('demo1').oncontextmenu = function() {
    return false;
};

これで、右クリックすると、2回目のクリックでコンテキストメニューが混乱することはありません。

次に、「右ダブルクリック」は、一般的には存在しないことを理解してください。イベントをバインドすることはできますがdblclick、それは一般的なイベントではありません。「ダブルクリック」とは、定義上、マウスの左ボタンでダブルクリックすることです。

そのため、イベントを使用してmousedown、右がクリックされた回数を確認し、2回後に反応する必要があります。クリック数を追跡し、短い時間枠の後に状態をリセットする小さなヘルパー関数を作成しました。

var RightClick = {
    'sensitivity':350,
    'count':0,
    'timer':false,
    'active':function () {
        this.count++;
        this.timer = setTimeout(
            this.endCountdown.bind(this),
            this.sensitivity
        );
    },
    'endCountdown': function () {
        this.count = 0;
        this.timer = false;
    }
};
$("div#demo1").mousedown(function(e) {
    if(e.which == 3) {
        RightClick.active();
        if (RightClick.count == 2)
            alert("right click double");
    }
});

ここで試してみてください：http：//jsfiddle.net/94L7z/

感度レートを調整して、好みに応じてダブルクリックを短くしたり長くしたりできます。

ドキュメンテーション

element.onContextMenuMDNで-https ://developer.mozilla.org/en-US/docs/DOM/window.oncontextmenu
element.onMouseDownMDNで-https ://developer.mozilla.org/en-US/docs/DOM/element.onmousedown
window.setTimeoutMDNで-https ://developer.mozilla.org/en-US/docs/DOM/window.setTimeout
jQuery event.which- http://api.jquery.com/event.which/
UnixPapa.comの「JavascriptMadness：Mouse Events」、マウスイベントと左/右ボタンに関連するいくつかのテストを示す記事-http: //unixpapa.com/js/mouse.html

score 0 · Accepted Answer

問題は、ダブルクリックの概念がJSに関する限り、マウスの左ボタンにのみ関連することです。したがって、マウスの右ボタンを何回、どれだけ速くクリックしても、それはシングルクリックの束として登録されます。じゃあ何をすればいいの？

クリック数を追跡するグローバル変数を作成する
右クリックを1回検出すると、これを行う方法をすでに知っているようです
右クリックが1回実行されたグローバル変数を設定します
タイムアウトを設定して、dblclickと見なされる妥当な時間内に別の右クリックが行われない場合、グローバル変数は0にリセットされます。300ミリ秒をお勧めします。これが最も自然なようです。
右クリックレジスタがその変数をチェックするたびに、それが複数ある場合は、ダブル右クリックハンドラを起動します。
そのグローバル変数をオブジェクトにして、右クリックを登録した要素を追跡し、それに応じて特定の要素の右クリックを期限切れにすることができます。これにより、さまざまなオブジェクトの上にマウスを移動しているときにダブルクリックした場合は無視できます。イベントのチェーンはユーザーがフォローする可能性が低いため、これはオプションだと思いますが、アプリによっては予期しない機能が発生する可能性があります。

score 0 · Accepted Answer

これでjQuery関数を定義する方が良いかもしれません（試してみてください）：

var precision = 400;
var lastClickTime = 0;

$(document).ready(function()
{
    var div = $('#div');

    $(div).bind("contextmenu", function(e)
    {
        return false;
    }); 

    $(div).mousedown(function(event)
    {
        if (event.which == 3)
        {
            var time = new Date().getTime();

            if(time - lastClickTime <= precision)
            {
                // DOUBLE RIGHT CLICK
                alert('double click');
            }

            lastClickTime = time;
        }
    });
});

javascript - jqueryの右クリックでdbclick()を追加する方法

5 に答える 5

Related

Reference