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

【问题标题】：Using javascript, how do you skip, or remove, e.stopPropagation() from certain class names in an element?使用 javascript，如何从元素中的某些类名中跳过或删除 e.stopPropagation()？
【发布时间】：2020-07-10 23:30:35
【问题描述】：

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

<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>

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

【问题讨论】：

“在所有标签中”？我不确定是否完全理解您的问题，但作为旁注，Event.stopPropagation() 应该永远不要使用。在阻止事件冒泡 DOM 并因此通知应用程序中的其他层发生了某些事情时，没有一个有效的论据。它只会导致问题。希望这就是您想要（根据我的理解）摆脱它的原因？
@RokoC.Buljan 抱歉，我使用类名更新了问题
是的，现在更清楚了，谢谢。 PS：无论如何。不要在你的应用程序中使用stopPropagation()（嗯......除非你真的，真的知道你在做什么）
谢谢，我会阅读关于你的 cmets 的 event.stopPropagation()
不客气。我扩展了我的答案，以给出一个有效的理由来支持我的陈述。还有一个类似的scenario example

标签： javascript html stoppropagation

【解决方案1】：

选择Event.target，它将为您提供准确的点击元素（不一定是附加了事件的元素！（.dropdown）在您的具体情况下）
拥有那个 target 元素，遍历 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 并因此通知应用程序中的其他层发生了某些事情时，没有一个有效的论据。它只会导致问题。

只是一个小例子：

想象一个自定义下拉菜单和一个自定义模式窗口，如果单击外部某处 - 在文档中，它们都会关闭。假设模式已打开，您单击 outside（希望将其关闭），但您的点击落在了下拉元素上。恭喜，下拉菜单打开了，但模式没有关闭，因为事件没有传播以通知其侦听器。更有趣的是，鉴于 CSS 中的 z-index 较高，下拉菜单会突然悬停在模态框上！你明白了。

【讨论】：