jQuery事件contextmenu触发底层div

Question

查看此事件（绑定2个div相互重叠，查看jsfiddle）

.on('contextmenu', function() { ... });

1. 为什么两个 div都被触发了？
2. 如何检测到这种情况并阻止底层div触发？

DEMO ：jsfiddle

感谢您的任何信息！

Answer 1

在嵌套元素上，您需要停止事件冒泡：

$('#div2').on('contextmenu', function(e) {
    e.stopPropagation();
    $('#log').append('<p>div2 triggered contextmenu!</p>');
});

DEMO

Answer 2

DEMO

$('#div1,#div2').on('contextmenu', function (e) {
    e.stopPropagation();
    $('#log').append('<p>' + e.target.id + ' triggered contextmenu!</p>');
});

event.target

event.stopPropagation/

Answer 3

您需要阻止事件传播，请尝试以下代码：

$('#div1').on('contextmenu', function(e) {
if(!e.isDefaultPrevented()){
    $('#log').append('<p>div1 triggered contextmenu!</p>');
    e.preventDefault();
}
});

$('#div2').on('contextmenu', function(e) {
if(!e.isDefaultPrevented()){
    $('#log').append('<p>div2 triggered contextmenu!</p>');
    e.preventDefault();
}
});