如何避免从 div 注册到另一个鼠标点击事件？

Question

情况：

我在圆和框上都有点击处理程序。
圆圈在方框内。
当我点击框时，它会记录框点击。
当我点击圆圈时，它会同时记录方框和圆圈的点击。

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);

Answer 1

您的代码正在监听对框的点击，但对圆圈的鼠标按下。

正因为如此，圆圈得到了点击，未能捕捉到它，并将其传递给盒子。

修复：更改此：

circle.addEventListener('mousedown', handleCircle);

对此：

circle.addEventListener('click', handleCircle);

如何避免从 div 注册到另一个鼠标点击事件？

How do you avoid two mouseclick events registering from a div on top of another?

javascript

event-handling

mouseevent

stoppropagation