javascript - jQuery 事件上下文菜单触发底层 div

Question

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

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

1. 为什么两个div都被触发？
2. 如何检测到这一点和/或阻止底层 div 触发？

演示：jsfiddle

感谢您提供任何信息！

Answer 1

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

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

演示

Answer 2

演示

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

事件.目标

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();
}
});