jQuery的live('click')在右键点击时触发

9

我注意到jQuery中live()函数有一种奇怪的行为:

<a href="#" id="normal">normal</a>
<a href="#" id="live">live</a>

$('#normal').click(clickHandler);
$('#live').live('click', clickHandler);

function clickHandler() {
    alert("Clicked");
    return false;
}

当你右键点击“活动”链接并触发处理程序时,它不会显示上下文菜单,这很好,但是问题出现了。在“普通”链接上,事件处理程序根本不会触发(正如预期的那样)。

我已经通过更改处理程序来解决此问题:

function clickHandler(e) {
    if (e.button != 0) return true;
    // normal handler code here
    return false;
}

但是在所有事件处理程序中都添加这个代码真的很烦人。有没有更好的方法使事件处理程序只像常规的点击处理程序一样触发?


1
你如何在未来提出问题? - PetersenDidIt
我很兴奋看到你在这里的解决方法,立即在我的应用程序上尝试了一下,虽然我现在右键单击的链接可以被捕获并忽略,但我仍然没有看到右键菜单。此外,我的中间鼠标按钮点击(在新标签页中打开)也不起作用。但是,至少处理程序可以提前返回! - Funka
实际上,如果我快速地反复右键单击,有时候可以让上下文菜单出现... 嗯。 - Funka
似乎在Firefox中使用live点击时,双击右键可以始终弹出上下文菜单。 - Funka
5个回答

9

这是一个已知问题

在Firefox浏览器中,右键点击元素时似乎不会触发单击事件,但会触发mousedown和mouseup事件。然而,它确实会在document上触发单击事件!由于.live在文档级别上捕获事件,即使元素本身没有看到单击事件,它也会看到该元素的单击事件。如果使用像mouseup这样的事件,p元素和document都将看到该事件。

目前您的解决方法是最好的。这似乎只影响Firefox浏览器(我认为这实际上是Firefox的错误,而不是jQuery本身的错误)。

另请参见昨天提出的这个问题


4
我发现了一个解决方案——“修复”live()代码本身。
在jQuery 1.3.2的未压缩源代码中,大约在2989行附近有一个名为liveHandler()的函数。修改代码以添加一行:
2989:    function liveHandler(event) {
2990:        if (event.type == 'click' && event.button != 0) return true;

这将防止点击事件在除左键外的任何键上触发。如果你特别想要,你可以很容易地修改代码以允许"右键单击"事件,但这对我而言已经足够了,所以它会一直保持这样。

3

实际上,您可以将其重写为:

function reattachEvents(){
    $(element).unbind('click').click(function(){
        //do something
    });
}

当您添加新的DOM元素并调用它时,应该得到预期的结果(不会触发右键单击事件)。

1
是的,但这不就违背了 live() 的目的吗? - nickf
true,但是live(click)的行为与普通的click()不同,如果您检测到按下了哪个按钮,则可以修复它,但是您需要确切地知道使用了哪个浏览器(IE在早期版本中的行为与新版本不同,而所有其他浏览器都以“正确”的方式行事)。目前来说,这是一个更加优雅的解决方案。 - SeanJA

0

我通过使用mousedown事件解决了这个问题。在我的情况下,鼠标按下和点击之间的区别并不重要。


0

这是live实现方式的一个不幸后果。它实际上使用了事件冒泡,因此您并没有绑定到锚元素的点击事件,而是绑定到文档的点击事件。


不好意思,Firefox 右键冒泡的方式存在缺陷。请参见 http://unixpapa.com/js/mouse.html。 - Crescent Fresh
@crescentfresh:我不确定对于这篇文章应该有多少信任度,因为它说“当然,Macintosh 版本的 Safari 不会受到这些问题的影响,因为 Macintosh 只有一个鼠标按钮”——我上一次使用只有一个按钮的 Mac 是在 TBL 发明 Web 之前的某个时候。;-) - NickFitz

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接