为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

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

2 回答

?
绝地无双

TA贡献1946条经验 获得超4个赞

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



查看完整回答
反对 回复 2022-12-22
?
幕布斯6054654

TA贡献1876条经验 获得超7个赞

您只需要停止事件的传播


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

    e.stopPropagation();

    console.log("HI");

  })


查看完整回答
反对 回复 2022-12-22
  • 2 回答
  • 0 关注
  • 90 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信