火狐浏览器奇怪的右键单击事件冒泡行为

Question

我在Firefox浏览器中遇到了一个奇怪的问题，当右键点击子节点时，会在文档节点上触发单击事件。

以下代码展示了该问题：http://jsfiddle.net/RyDZU/5/ 更新版本：http://jsfiddle.net/RyDZU/10/

$(document).on("click","span",function(e) {
    console.log('span');
    console.log(e.isPropagationStopped());
});

$(document).on("click","div",function(e) {
    console.log('div');
    console.log(e.isPropagationStopped());
    e.stopPropagation();
    console.log(e.isPropagationStopped());
});

$(document).on("click",function(e) {
    console.log('body');
    console.log(e.isPropagationStopped());
});

HTML: <div><span>测试</span></div>

如果您在Firefox（21）中右键单击“测试”一词，则控制台上会打印“body”一词。但在IE 10 / Chrome中不会出现此情况。

如何防止在Firefox中触发此事件？

以下方法无效：

$("body").on("click", "span", function(e) {
    e.preventDefault();
    e.stopPropagation();
});

- Tom Allard

---

这个问题已经被记录在这里：https://bugzilla.mozilla.org/show_bug.cgi?id=184051。我猜你需要检测哪个鼠标按钮被点击了，如果在Firefox上点击了右键或中键，则取消它。 - Mr. Duc Nguyen

@Mr.DucNguyen 哇，这个 bug 的历史可以追溯到 2002 年？！ - Timothy003

是的，它仍然活跃 : )，也许在另一个十年内会被“修复”，但我怀疑，因为我们已经进入了“触摸”事件时代。 - Mr. Duc Nguyen

Answer 1

我遇到了同样的问题。我有一个小例子，如果你在绿色正方形中左键单击，事件将由处理程序2（在div上）和处理程序3（在文档上）处理。但是，如果你右键单击，只有处理程序3被调用，这意味着没有简单的方法可以停止在div上右键单击时的事件传播。 jsfiddle

// requisite jsfiddle code snippet
function handler2() {
    console.log('in handler2');
}

function handler3() {
    console.log('in handler3');
}

$(document).ready(function () {
    $('#block2').on('click', handler2);
    $(document).on('click', handler3);
});

我也尝试了调整dom.event.contextmenu.enabled和services.sync.prefs.sync.dom.event.contextmenu.enabled这两个设置，但对此行为没有影响。

- opike

Answer 2

您可以通过使用event.which来检查是哪个鼠标按钮被按下（从附加到文档的事件侦听器中）。请参阅https://stackoverflow.com/a/12430795/1170489以获取更多信息。

- Theodore Brown

Answer 3

制作

$(document).on("click",function(e) {
    console.log('body');
    console.log(e.isPropagationStopped());
});

你脚本中的第一个处理程序。当你按照自己的方式操作时，文档点击处理程序会隐藏 span 和 div 处理程序。

- Kamil T

---

不行，问题依旧。事件处理程序在右键单击时触发。http://jsfiddle.net/RyDZU/6/ - Tom Allard