如何将事件侦听器添加到不触发父事件侦听器的子事件？答案

【问题标题】：How to add event listener to child that doesn't trigger the event listener on parent?如何将事件侦听器添加到不触发父事件侦听器的子事件？
【发布时间】：2020-08-06 14:03:41
【问题描述】：

我正在尝试将事件侦听器添加到两个元素，容器和存档。它们在这个层次结构中 - 容器->时间戳->存档。

我通过以下方式向存档按钮添加了一个事件监听器，

archive.addEventListener('click', ()=>{
    console.log("HI");
  })

以类似的方式，我将事件侦听器附加到存档按钮的父容器，

container.addEventListener('click', ()=>{
    open_email(element.id);
  })

每当我点击存档按钮时，容器的事件监听器就会被触发，这是不可取的。我尝试查找事件委托，但没有解决这个问题的任何想法。任何帮助将不胜感激。

【问题讨论】：

event.stopPropagation() 存档中的事件。您需要将event 作为参数传递给处理程序。 developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
这能回答你的问题吗？ How do I detect a click outside an element?
重复也是类似的情况。
@Taplar，我在发布我的问题之前阅读了该主题。我发现很多人不推荐stopPropagation。
“可能”是重要的词。编程中的一切都可能成为未来的潜在问题。作为开发人员，您应该了解自己的代码库并知道这是否会成为问题。此外，跑题了，这就是前端功能测试很重要的原因。

标签： javascript event-handling

【解决方案1】：

const parent = document.querySelector('.parent');
const child = document.querySelector('.child');

parent.onclick = e => {
  console.log('You shouldn\'t see this');
}

child.onclick = e => {
  e.stopPropagation();
  console.log('Only child listener fired')
}

<div class='parent'>
  <div class='child'>Child</div>
</div>

event.stopPropagation 停止触发更多事件。

【讨论】：

【解决方案2】：

你只需要停止事件的传播

archive.addEventListener('click', (e)=>{
    e.stopPropagation();
    console.log("HI");
  })

【讨论】：

在某个地方肯定有一个预先存在的副本。
抱歉问了这么愚蠢的问题，我是 JavaScript 新手，但我在一篇文章中读到使用 stopPropagation 很危险，不推荐使用。
停止传播的“危险”在于，如果 dom 树上的其他事件侦听器需要该事件，他们将不会得到它。但是，作为逻辑开发人员，您应该了解自己的情况并知道这是否值得关注。如果这不是问题，stopPropagation 可以正常工作。