使用 javascript，如何从元素中的某些类名中跳过或删除 e.stopPropagation()?

Question

使用javascript，如何从元素中的某些类名中跳过或删除e.stopPropagation()。在这种情况下，.trigger类在.dropdown？

<div class="dropdown">
<a href="#" class="trigger edit">Edit</a>
<a href="#" class="trigger delete">Delete</a>
<div class="content">
<p>Some Text</p>
</div>
</div>

.JS

document.querySelector(".dropdown").addEventListener("click", e => {
e.stopPropagation();
})

Answer 1

• 选择Event.target，它将为您提供确切点击的元素(不一定是附加了事件的元素！(.dropdown) 在您的具体情况中)
• 有了该目标元素，遍历 DOM 开始(并包括)该元素的祖先链以搜索Element.closest()
• 使用if语句查看是否找到该元素：

document.querySelector(".dropdown").addEventListener("click", e => {
const elClassTrigger = e.target.closest(".trigger");
if ( elClassTrigger ) e.stopPropagation();
});

<div class="dropdown">
<a href="#" class="trigger edit">Edit</a>
<a href="#" class="trigger delete">Delete</a>
<div class="content">
<p>Some Text</p>
</div>
</div>

重要：

作为旁注，Event.stopPropagation()永远不应该使用。没有一个有效的参数必须阻止事件冒泡 DOM 并因此通知应用程序中的其他层发生了某些事情。它只会引起问题。

举个小例子：

想象一下，一个自定义下拉列表和一个自定义模式窗口，如果单击文档外部的某个位置，它们都会关闭。假设模态是打开的，你点击外面(希望关闭它)，但你的点击落在一个下拉元素上。恭喜，下拉列表打开，但模式未关闭，因为事件未传播以通知其侦听器。更有趣的是，在 CSS 中给定更高的 z 索引的情况下，下拉菜单突然悬停在模态上！你明白了。