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

Question

我正在尝试将事件侦听器添加到容器和存档这两个元素。它们在这个层次结构中——容器->时间戳->归档。我通过以下方式向存档按钮添加了一个事件监听器，archive.addEventListener('click', ()=>{     console.log("HI");   })以类似的方式，我将事件侦听器附加到存档按钮的父容器，container.addEventListener('click', ()=>{     open_email(element.id);   })每当我单击存档按钮时，都会触发容器的事件侦听器，这是不可取的。我尝试查找事件委托但没有解决这个问题的任何想法。任何帮助，将不胜感激。

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

Answer 2

您只需要停止事件的传播

archive.addEventListener('click', (e)=>{

    e.stopPropagation();

    console.log("HI");

  })