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

Question

使用 javascript，如何跳过或删除元素中某些 class 名称的 e.stopPropagation()。在这种情况下，.trigger class 在 .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）在您的特定情况下）
有了 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 并因此通知应用程序中的其他层发生了某些事情。它只会引起问题。

举个小例子：

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

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

Using javascript, how do you skip, or remove, e.stopPropagation() from certain class names in an element?

html

javascript

stoppropagation

重要：