如何为所有层叠重叠元素触发mouseover事件并执行对应监听

浏览器默认事件命中规则只会将鼠标事件派发给可视层级最高的元素，同层级下层元素不会收到事件，且事件冒泡仅向上传递给父元素，不会向下/向同层级覆盖元素传递，因此需要手动实现事件分发逻辑，以下是两种可行方案：

方案1：使用elementsFromPoint API（推荐） #

该API可以直接获取指定坐标下所有层叠的DOM元素，无需手动计算坐标，实现简单：

const child1 = document.querySelector('.child-1');
const child2 = document.querySelector('.child-2');
// 存储所有需要监听鼠标事件的目标元素
const targetElements = [child1, child2];

// 预先给每个元素绑定好对应的处理逻辑
child1.handleMouseMove = () => console.log(1);
child2.handleMouseMove = () => console.log(2);

// 全局监听mousemove事件做统一分发
document.addEventListener('mousemove', (e) => {
  // 获取当前鼠标坐标下所有层叠的元素
  const elementsUnderPoint = document.elementsFromPoint(e.clientX, e.clientY);
  // 遍历所有目标元素，检查是否在当前坐标的元素列表中
  targetElements.forEach(el => {
    if (elementsUnderPoint.includes(el)) {
      // 触发对应元素的处理逻辑，也可以手动构造事件派发给元素
      el.handleMouseMove();
      // 手动派发事件的写法：el.dispatchEvent(new MouseEvent('mousemove', e))
    }
  })
})

注意：如果页面元素较多，可以添加节流函数降低事件触发频率，避免性能损耗；也可以仅在公共父容器上绑定事件监听，缩小事件触发范围。

方案2：手动实现矩形碰撞检测（兼容性更好） #

如果需要兼容不支持elementsFromPoint的老旧环境，可以提前计算每个元素的坐标范围，鼠标移动时做碰撞判断：

const child1 = document.querySelector('.child-1');
const child2 = document.querySelector('.child-2');
const targetElements = [child1, child2];

child1.handleMouseMove = () => console.log(1);
child2.handleMouseMove = () => console.log(2);

// 判断坐标是否在元素矩形范围内的工具函数
const isPointInElement = (x, y, el) => {
  const rect = el.getBoundingClientRect();
  return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
}

document.addEventListener('mousemove', (e) => {
  const { clientX, clientY } = e;
  targetElements.forEach(el => {
    if (isPointInElement(clientX, clientY, el)) {
      el.handleMouseMove();
    }
  })
})

注意：如果元素位置会动态变化，需要在元素位置更新时同步更新存储的矩形坐标，避免判断失效。

两种方案都不需要修改元素的z-index或pointer-events属性，不影响元素原有交互逻辑，可以满足多个重叠元素同时触发鼠标事件的需求。

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