如何在重叠的兄弟DOM元素上触发所有命中元素的mouseup事件

浏览器原生鼠标事件默认只会派发给当前指针位置最顶层的命中元素，被其他元素遮挡、层级更低的元素不会自动收到事件，且事件的捕获/冒泡流程只会在目标元素的祖先节点间传播，兄弟节点之间不会共享事件传播路径，因此你之前给item2绑定捕获阶段监听器的写法无法触发item1的事件。
要实现「只要鼠标在元素范围内，不管层叠关系如何都触发对应mouseup事件」的效果，只需要全局监听事件+手动做元素命中检测即可，完全不依赖元素的z-index层级。 #

你可以直接替换原有JS逻辑，CSS和HTML不需要修改：

// 1. 统一收集所有需要触发mouseup事件的目标元素
// 如果后续要加更多元素，只要给元素加统一类名、在这里批量获取即可
const hitTargets = [
  document.querySelector("#item1"),
  document.querySelector("#item2")
];

// 2. 绑定每个元素对应的mouseup处理逻辑，和你原有逻辑完全一致
const eventHandlers = new Map();
eventHandlers.set(hitTargets[0], () => {
  console.log("Mouseup item 1!");
});
eventHandlers.set(hitTargets[1], () => {
  console.log("Mouseup item 2!");
});

// 3. 在document捕获阶段监听mouseup，避免被元素上的stopPropagation拦截
document.addEventListener('mouseup', (e) => {
  const { clientX, clientY } = e;
  // 遍历所有目标元素做命中检测
  hitTargets.forEach(el => {
    // 跳过不可见元素
    const computedStyle = window.getComputedStyle(el);
    if (computedStyle.display === 'none' || computedStyle.visibility === 'hidden') return;
    
    // 获取元素当前在视口内的实际渲染位置
    const rect = el.getBoundingClientRect();
    // 判断鼠标坐标是否落在元素范围内
    const isPointerInRange = clientX >= rect.left
      && clientX <= rect.right
      && clientY >= rect.top
      && clientY <= rect.bottom;
    
    if (isPointerInRange) {
      // 命中后执行对应处理逻辑，也可以用el.dispatchEvent手动派发原生事件
      const handler = eventHandlers.get(el);
      handler?.call(el, e);
    }
  });
}, true);

• 检测逻辑完全不依赖DOM层级和z-index关系，只要元素在鼠标指针位置匹配坐标范围，不管被多少层元素遮挡都会触发对应事件
• getBoundingClientRect()会自动计算元素transform偏移、滚动偏移后的实际渲染位置，检测结果准确
• 如果需要批量管理目标元素，可以给所有需要检测的元素加统一类名（比如class="mouseup-target"），初始化时直接用document.querySelectorAll('.mouseup-target')批量获取即可，不需要手动逐个写入数组
• 如果你需要完全模拟原生事件的行为，可以把执行handler的部分替换成el.dispatchEvent(new MouseEvent('mouseup', e))，就能触发元素上通过addEventListener绑定的所有原生mouseup监听

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