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

还有另一种方法可以检测双击，而不需要摆弄计时器或手动跟踪点击次数。在mouseup或mousedown事件中使用事件对象的.detail属性。.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返回的原始事件对象。如果您使用纯JavaScript而不是jQuery，那么您只需要使用evt.detail。

下面是一个工作示例。

没有真正的方法可以做到这一点，你可以通过双击默认计时器来模拟它，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/

因为右键单击对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/

您可以根据自己的喜好调整灵敏度，允许更短或更长的双击。

文档

• MDN-上的element.onContextMenuhttps://developer.mozilla.org/en-US/docs/DOM/window.oncontextmenu
• MDN-上的element.onMouseDownhttps://developer.mozilla.org/en-US/docs/DOM/element.onmousedown
• MDN-上的window.setTimeouthttps://developer.mozilla.org/en-US/docs/DOM/window.setTimeout
• jQuery event.which-http://api.jquery.com/event.which/
• UnixPap.com上的"Javascript疯狂：鼠标事件"，一篇文章展示了一些与鼠标事件和左/右按钮相关的测试-http://unixpapa.com/js/mouse.html

问题是双击的概念只与JS的鼠标左键有关。因此，无论你点击鼠标右键的次数和速度如何，它都只是一次点击。那该怎么办呢？

1. 创建全局变量以跟踪点击次数
2. 检测到一次右键单击，你似乎已经知道如何做到这一点了
3. 设置触发右键单击一次的全局变量
4. 设置一个超时，这样如果在考虑dbl的合理时间单击全局变量重置为0。我推荐300毫秒，这似乎是最自然的
5. 每次右键单击寄存器时，如果变量比一个，激发你的双击处理程序
6. 您可能希望将该全局变量设置为对象，以便跟踪哪个元素注册右键单击并过期特定元素右键单击照着这将允许您忽略它们是否双击同时在各种对象上移动鼠标。我认为可选的，因为用户不太可能遵循事件链，但取决于你的应用程序可能会产生意想不到的功能

定义一个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;
        }
    });
});