嵌套DOM结构下如何避免点击内层圆误触发外层盒子的点击事件

问题场景 #

• 分别为圆形元素、矩形盒子元素绑定了事件处理逻辑
• 圆形元素嵌套在盒子元素内部
• 直接点击盒子的空白区域时，可正常触发盒子的点击逻辑
• 点击圆形元素时，会同时触发圆形、盒子两个元素的点击事件
• 已尝试通过event.stopPropagation()、设置event.cancelBubble = true阻止事件冒泡，未达到预期效果

原有示例代码 #

HTML

<div class="container">
  <div class="box">
    <div class="circle"></div>
  </div>
</div>

JavaScript

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

问题根因 #

事件冒泡仅作用于同类型事件的传播链路：代码中给圆形元素绑定的是mousedown事件，给盒子元素绑定的是click事件，二者属于完全独立的事件类型，传播流程互不干扰。在mousedown回调中调用的stopPropagation，只能拦截mousedown事件向外冒泡，完全不会干预用户松开鼠标时触发的click事件的冒泡过程，自然无法阻止盒子的点击逻辑执行。

额外说明：绑定在盒子上的handleBox中的stopPropagation、cancelBubble属于冗余代码，本身不需要阻止自身事件的冒泡；cancelBubble是早期IE的兼容属性，现代浏览器中标准的stopPropagation已经覆盖了所有冒泡拦截场景，无需重复设置。

修复方案 #

常规场景：点击圆形时仅触发自身逻辑，不触发外层盒子的点击逻辑

只需要将圆形的事件绑定调整为和盒子同类型的click事件，在其回调中阻止冒泡即可：

const box = document.querySelector('.box');
const circle = document.querySelector('.circle');

const handleBox = () => {
  console.log('box clicked');
};

const handleCircle = (e) => {
  // 拦截click事件向盒子方向冒泡
  e.stopPropagation();
  console.log('circle clicked');
}

box.addEventListener('click', handleBox);
// 调整为和盒子一致的click事件类型
circle.addEventListener('click', handleCircle);

特殊场景：需要保留圆形的mousedown事件逻辑

如果业务上确实需要监听圆形的mousedown事件，同时要避免点击圆形时触发外层盒子的点击逻辑，可以单独给圆形绑定一个只用来拦截冒泡的click事件即可：

// 保留原有mousedown逻辑
circle.addEventListener('mousedown', handleCircle);
// 新增单独的click拦截逻辑，不影响原有业务
circle.addEventListener('click', (e) => e.stopPropagation());

内容的提问来源于stack exchange，提问作者wongx