如何向不触发父级事件监听器的子级添加事件监听器？

Question

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

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

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

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

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

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

Answer 1

你只需要停止传播事件

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

Answer 2

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 停止触发更多事件。

如何向不触发父级事件监听器的子级添加事件监听器？

How to add event listener to child that doesn't trigger the event listener on parent?

javascript

event-handling