怎么让鼠标事件穿透绝对定位的覆盖层触发底层元素

通过设置 pointer-events: none，可以让绝对定位的遮罩层不拦截鼠标事件，使底层表格单元格等元素正常响应 mousemove 等交互事件。

通过设置 `pointer-events: none`，可以让绝对定位的遮罩层不拦截鼠标事件，使底层表格单元格等元素正常响应 `mousemove` 等交互事件。

在 Web 开发中，常需在表格上方叠加一个半透明、绝对定位的 div（例如用于高亮、遮罩或拖拽辅助），但默认情况下该 div 会捕获所有鼠标事件（如 mousemove、click），导致其下方的表格单元格无法被正确识别。

解决方法非常简洁：只需为该覆盖层 div 设置 CSS 属性 pointer-events: none。该属性会使元素完全不参与鼠标事件的捕获与分发，事件将直接穿透到其下方的 DOM 元素（如 <td> 单元格），从而恢复 mousemove 的正常行为。

✅ 示例代码：

<table id="myTable">  <tr><td>Cell 1</td><td>Cell 2</td></tr>  <tr><td>Cell 3</td><td>Cell 4</td></tr></table><!-- 覆盖层：半透明、绝对定位，但不阻断鼠标事件 --><div id="overlay" style="  position: absolute;  top: 0; left: 0;  width: 100%; height: 100%;  background: rgba(255, 255, 0, 0.2);  z-index: 1;  pointer-events: none; /* ✅ 关键：允许事件穿透 */"></div>

document.getElementById('myTable').addEventListener('mousemove', (e) => {  const cell = e.target.closest('td');  if (cell) {    console.log('Hovering over:', cell.textContent);  }});

⚠️ 注意事项：

• pointer-events: none 仅影响鼠标事件（click、mousemove、mouseenter 等），不影响 focus、scroll 或键盘事件；
• 若需在某些条件下恢复事件拦截（如点击时激活遮罩），可动态切换该样式：overlay.style.pointerEvents = 'auto' / 'none'；
• 该属性在所有现代浏览器中均被良好支持（包括 IE11+），无需额外兼容处理；
• 不要与 visibility: hidden 或 opacity: 0 混淆——二者仍会拦截事件，而 pointer-events: none 是真正的“事件透明”。

总之，pointer-events: none 是实现视觉覆盖与交互穿透的理想方案，简洁、高效且语义清晰。