Question

我正在尝试将事件侦听器添加到两个元素，容器和归档。它们在此层次结构中-container-> timestamp-> archive。

我通过以下方式向归档按钮添加了事件监听器

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停止触发其他事件。

如何将事件侦听器添加到不会在父级上触发事件侦听器的子级？

2 个答案: