如何在jquery中右键单击添加dbclick（）

Question

您好，我想在右键单击时使用 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");
            }
        }); 

Answer 1

还有另一种方法可以检测双击右键，它不涉及摆弄计时器或手动跟踪点击次数。在mouseup 或mousedown 事件中使用事件对象的.detail 属性。 .detail 持有click count，它将告诉您最近发生了多少点击。如果.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 返回的原始事件对象。如果您使用纯 JavaScript 而不是 jQuery，您只需使用 evt.detail。

这是working example。

Answer 2

没有真正的方法可以做到这一点，您可以通过采用默认的双击计时器来模拟它，IIRC 是 300 毫秒：

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/

Answer 3

由于右键单击对 javascript 范围之外的用户代理（上下文菜单）有意义，因此您将不得不做一些跳舞。

首先，您应该禁用目标元素上的上下文菜单：

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

现在，当我们右键单击时，不会有上下文菜单搞乱第二次单击。

接下来要明白“双击右键”一般来说是不存在的。即使您可以绑定dblclick 事件，这也不是通用事件。 “双击”顾名思义就是用鼠标左键双击。

因此，我们将不得不使用mousedown 事件，检查右侧被点击了多少次，然后在两次之后做出反应。我创建了一个小型辅助函数，用于跟踪点击次数并在短时间内重置状态。

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.onContextMenu MDN - https://developer.mozilla.org/en-US/docs/DOM/window.oncontextmenu
• element.onMouseDown MDN - https://developer.mozilla.org/en-US/docs/DOM/element.onmousedown
• window.setTimeout MDN - https://developer.mozilla.org/en-US/docs/DOM/window.setTimeout
• jQuery event.which - http://api.jquery.com/event.which/
• UnixPapa.com 上的“Javascript Madness: Mouse Events”，一篇文章展示了一些与鼠标事件和左/右键相关的测试 - http://unixpapa.com/js/mouse.html

Answer 4

问题是，就JS而言，双击的概念只与鼠标左键有关。因此，无论您单击鼠标右键多少次，以多快的速度单击鼠标右键，它都只会注册为一堆单击。那么该怎么办呢？

1. 创建一个全局变量来跟踪点击次数
2. 检测到单击右键，您似乎已经知道该怎么做
3. 设置触发一次右键的全局变量
4. 设置一个超时，所以如果另一个右键单击没有通过 合理的时间被认为是一个 dblclick 全局变量 重置为0。我推荐300毫秒，这似乎是最自然的
5. 每次右键单击寄存器检查该变量，如果它更多 比一个，触发你的双击右键处理程序。
6. 您可能希望将该全局变量设为对象，以便跟踪哪个元素 注册右键并过期特定元素右键 因此。如果他们双击，这将允许您忽略 同时将鼠标移动到各种对象上。我认为这 可选的，因为用户不太可能遵循事件链， 但根据您的应用，可能会导致意外功能。

Answer 5

用这个 (try it) 定义一个 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;
        }
    });
});