如何实现两个重叠div绑定的mousedown鼠标事件同时捕获

默认情况下浏览器鼠标事件遵循命中测试规则，仅响应视觉层级最顶部的可交互元素，所以你当前的代码点击重叠区域只会触发上层#b的事件，要实现两个事件同时触发可以参考以下两种方案：

方案1：无DOM结构修改方案（兼容性最优） #

无需调整现有HTML和CSS，新增全局事件分发逻辑即可：

function adown() {
  console.log('A')
}

function bdown() {
  console.log('B')
}

document.addEventListener('mousedown', e => {
  const handled = new Set()
  const x = e.clientX, y = e.clientY
  let el = document.elementFromPoint(x, y)

  // 递归查询点击位置所有重叠元素
  while (el && el !== document.documentElement) {
    // 匹配到对应元素触发事件
    if (el.id === 'a' && !handled.has(el)) {
      adown()
      handled.add(el)
    }
    if (el.id === 'b' && !handled.has(el)) {
      bdown()
      handled.add(el)
    }
    // 临时禁用当前元素指针事件，查询下一层元素
    el.style.pointerEvents = 'none'
    el = document.elementFromPoint(x, y)
  }

  // 恢复所有元素的指针事件配置
  handled.forEach(item => item.style.pointerEvents = 'all')
})

该方案点击重叠区域会依次触发#b和#a的绑定事件，控制台将同时输出A和B。

方案2：DOM嵌套方案（代码最简） #

如果可以调整DOM结构，将两个元素改为父子嵌套关系，利用事件冒泡机制天然实现多事件触发：
修改后的HTML代码：

<div id="a" onmousedown="adown()">
  <div id="b" onmousedown="bdown()"></div>
</div>

原有CSS和JS逻辑无需调整，点击重叠区域时事件会先触发子元素#b的事件，再冒泡到父元素#a触发对应事件。

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