javascript - Firefox 奇怪的右键单击事件冒泡行为

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>

如果您右键单击单词“test”，则单词“body”将打印在 firefox (21) 的控制台中。不在 IE 10/Chrome 中。

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

这不起作用：

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

Answer 1

我遇到了同样的问题。我有一个小提琴，如果您在绿色方块中左键单击，则事件由 handler2（在 div 上）和 handler3（在文档上）处理。但是，如果您右键单击，则只会调用 handler3，这意味着没有简单的方法来停止 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，但它们对这种行为没有影响。

Answer 2

这可以通过使用event.which检查哪个鼠标按钮被按下（来自附加到文档的事件侦听器）来修复。请参阅https://stackoverflow.com/a/12430795/1170489。

Answer 3

制作

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

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