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

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 => {&nbsp; console.log('You shouldn\'t see this');}child.onclick = e => {&nbsp; e.stopPropagation();&nbsp; console.log('Only child listener fired')}<div class='parent'>&nbsp; <div class='child'>Child</div></div>event.stopPropagation停止触发更多事件。

Answer 2

您只需要停止事件的传播archive.addEventListener('click', (e)=>{&nbsp; &nbsp; e.stopPropagation();&nbsp; &nbsp; console.log("HI");&nbsp; })