如何触发被绝对定位div覆盖的表格单元格的mousemove事件？

这里有几个实用的方案，根据你的场景选择：

方案一：让遮挡层穿透鼠标事件（最简单） #

给你的遮挡div添加pointer-events: none CSS属性，这个属性会让该元素完全忽略所有鼠标交互，鼠标事件会直接传递给下方的表格单元格。如果遮挡层内部还有需要响应鼠标的元素，单独给那些元素设置pointer-events: auto即可。

示例代码：

.overlay-div {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
  pointer-events: none; /* 核心设置 */
}

/* 如果遮挡层内有需要交互的元素 */
.overlay-div .interactive-element {
  pointer-events: auto;
}

方案二：通过坐标手动定位并触发事件 #

如果遮挡层本身需要响应鼠标事件（不能用pointer-events: none），可以在遮挡层的mousemove事件中，通过鼠标坐标获取下方的单元格，甚至手动触发单元格的mousemove事件。

示例代码：

const overlay = document.querySelector('.overlay-div');

overlay.addEventListener('mousemove', function(e) {
  const { clientX, clientY } = e;
  
  // 临时关闭遮挡层的鼠标事件，让elementFromPoint能获取到底层元素
  this.style.pointerEvents = 'none';
  const target = document.elementFromPoint(clientX, clientY);
  // 恢复遮挡层的鼠标事件
  this.style.pointerEvents = 'auto';
  
  // 检查是否是表格单元格
  if (target?.tagName === 'TD') {
    // 这里可以直接处理单元格逻辑，或者手动触发它的mousemove事件
    const mouseMoveEvent = new MouseEvent('mousemove', {
      bubbles: true,
      cancelable: true,
      clientX,
      clientY
    });
    target.dispatchEvent(mouseMoveEvent);
  }
});

方案三：动态调整层级（备选） #

如果允许遮挡层暂时“让位”，可以在需要检测单元格时，把遮挡层的z-index设为负数，让表格处于上层，事件触发后再恢复原层级。不过这种方法可能会导致遮挡层短暂消失，视觉体验不如前两种，仅作为备选。

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