Question

我在firefox中遇到一个奇怪的问题，右键单击子节点时会在文档节点上引发click事件。

$(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：＆LT; DIV＆GT;＆LT;跨度＆GT;试验＆LT; /跨度＆GT;＆LT; / DIV＆GT;

如果右键单击“test”，则在firefox（21）的控制台中打印“body”一词。不在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处理程序。

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

3 个答案: