我试图在网页上的按钮上添加事件侦听器,我的按钮包含几个子元素,当我单击我的按钮时,我只需要获得与按钮相关的数据,例如数据属性。
即使在我的点击处理程序中添加了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的区别