Javascript事件.stoppropagation仍然触发按钮的子元素



我试图在网页上的按钮上添加事件侦听器,我的按钮包含几个子元素,当我单击我的按钮时,我只需要获得与按钮相关的数据,例如数据属性。

即使在我的点击处理程序中添加了event.stopPropogation(),我仍然看到,当我直接点击h2元素时,没有记录数据属性。

我的代码到底遗漏了什么?

const button = document.querySelector('[data-toggle="collapse"]')
button.addEventListener('click', (e) => {
e.stopPropagation()
const target = e.target.dataset
console.log(target)
}, false)
<body>
<button type="button" data-target="hello" data-toggle="collapse">
<div class="row">
<div class="col">
<h2>
My heading 2
</h2>
</div>
</div>
</button>
</body>

停止传播反过来工作。您可以在这里看到它是如何工作的:事件之间的区别是什么?stopPropagation和event.preventDefault?

你需要做的是从e.c urcurrenttarget中获取数据,而不是从e.target中获取数据。

const button = document.querySelector('[data-toggle="collapse"]')
button.addEventListener('click', (e) => {
const target = e.currentTarget.dataset
console.log(target)
}, false);

Also: e.target和e. currentttarget的区别

相关内容

  • 没有找到相关文章

最新更新