Question

我需要一个自定义上下文菜单，所以我使用addEventListener，但我希望在div1上，但不在div2上，我怎么做没有到使用stopPropagation()

添加相同的侦听器

<html>
<head>
</head>
<body>
<div id="div1" style="background-color:green;border:3px solid black;width:300px;height:300px;margin:auto;">
<div id="div2" style="background-color:yellow;border:3px solid black;width:100px;height:100px;margin:auto;margin-top:-50px;">
some text
</div>
</div>
<script>
document.getElementById('div1').addEventListener('contextmenu', function(e)
    {
    console.log('contextmenu');
    });
</script>
</body>
</html>

Answer 1

只需检查处理程序中的事件目标，如果目标是<div2>，则中止。

Answer 2

添加false作为addEventListener的第三个参数

document.getElementById('div1').addEventListener('contextmenu', function(e)
{
    console.log('contextmenu');
}, false);

或者 if(e.currentTarget.getAttribute("id") != "div1") e.preventDefault();

如何防止DOM子进程继承addEventListener？

2 个答案: