Javascript 阻止事件向孩子们冒泡

我以为我掌握了冒泡的概念，但现在看来我没有。我创建了这个半模态对话框：

<div class="context-menu">
    <div class="menu">
        …
    </div>
</div>

…

上下文菜单是位置：固定的，占据整个屏幕。它有一个透明的黑色背景（就像一个经典的模态对话框）。菜单较小，背景为白色，位于中间。我想在单击外部区域时关闭此对话框。因此，我在

.context menu

元素中添加了一个

EventListener

“click”。单击后，我将删除整个元素（在

.context menu

上显示：无）。到目前为止还不错

问题是，点击似乎也在冒泡。因此，如果我在

.menu

元素中单击，事件也会触发（注意：

.menu

是不透明的）。我认为事情应该向上发展（对父母），而不是向下发展（对孩子）。我似乎不知道如何预防这种情况。我在两个元素的所有组合中尝试了

preventDefault

和

stopPropagation

。结果总是一样的。在

菜单

元素内外的每次单击都会触发事件

---

你能帮我吗？我做错了什么？

如果我正确理解了您的问题，您不希望在

菜单

元素中单击时隐藏模式对话框。这可以通过以下代码完成：

const container = document.querySelector(".context-menu");
const menu = document.querySelector(".menu");
container.addEventListener("click", e => {
    if (!menu.contains(e.target)) {
    container.style.display = "none";
  }
});

---

我使用了事件的

target

属性。它显示单击了哪个元素。如果单击在

.menu

之外，则函数会隐藏容器元素

“因此，如果我在.menu元素内部单击，事件也会触发”-这是应该的，因为事件会“向上”冒泡到

.context menu

o.OWell，true。但是，如果我将另一个click EventListener添加到.menu并将e.stopPropagation添加到该菜单，则.context menu上的事件仍会触发：/您可能需要重新思考您的问题。标题假设事件“向下”冒泡，然后文本讨论事件冒泡的定义行为，在评论中，您正在谈论单击一个子项，然后再次讨论事件冒泡的定义行为。也就是说。。。我无法重现您在评论中提到的问题：非常抱歉。我犯了一个严重的错误。上下文菜单上的我的EventListener将useCapture设置为true。我错误地纠正了这一点，现在它工作了！对不起，我打扰你了：/