如何解决如何避免从一个 div 注册到另一个 div 上的两个 mouseclick 事件?
JSFiddle link to code
情况:
- 我在圆和框上都有点击处理程序。
- 圆圈在盒子里面。
- 当我点击该框时,它会注册该框点击。
- 当我点击圆圈时,它会同时注册框和圆圈点击。
event.stopPropagation()
和 event.cancelBubbles=true
不起作用,除非我使用不当。
如何避免在点击圆圈时注册框点击?
html
<div class="container">
<div class="box">
<div class="circle"></div>
</div>
</div>
js
const box = document.querySelector('.box');
const circle = document.querySelector('.circle');
const handleBox = (e) => {
e.stopPropagation();
e.cancelBubble = true;
console.log('box clicked');
};
const handleCircle = (e) => {
e.stopPropagation();
e.cancelBubble = true;
console.log('circle clicked');
}
box.addEventListener('click',handleBox);
circle.addEventListener('mousedown',handleCircle);
解决方法
您的代码正在侦听对框的点击,但正在侦听圆圈上的鼠标点击。
因此,圆圈获得了点击,但未能抓住它,并将其传递给框。
修复:更改此:
circle.addEventListener('mousedown',handleCircle);
为此:
circle.addEventListener('click',handleCircle);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。