如何让绝对定位的遮罩层不阻断鼠标事件传递到底层元素

在 Web 开发中，常需在表格、图表或网格布局上叠加一层视觉提示（例如高亮蒙版、拖拽指示器或实时标注框）。若该图层使用 position: absolute + z-index 实现覆盖，虽能正常显示，但会成为鼠标事件的“捕获者”，使底层真实可交互元素（如 <td>、<button> 或 <canvas>）无法响应 mousemove、click 等事件。

核心解决方案：启用指针事件穿透
只需为覆盖用的 p 添加一行 CSS：

.overlay {
  position: absolute;
  background: rgba(255, 200, 0, 0.3);
  z-index: 1;
  pointer-events: none; /* ✅ 关键：允许鼠标事件穿透至下层 */
}

此时，该 p 仍保有全部视觉效果（颜色、透明度、层级），但浏览器将忽略其对鼠标事件的捕获，mousemove 会直接触发底层 <td> 的事件监听器，event.target 也能正确指向实际单元格。

⚠️ 注意事项：

• pointer-events: none 会禁用该元素所有鼠标交互（包括 click、hover、contextmenu），因此若该遮罩本身还需响应点击（如关闭按钮），应将可交互子元素单独设为 pointer-events: auto：

  .overlay { pointer-events: none; }
  .overlay .close-btn { pointer-events: auto; } /* 按钮恢复响应 */

• 不支持 IE10 及更早版本（IE11+ 支持良好）；若需兼容旧 IE，可考虑用 JavaScript 手动转发事件（如 document.elementFromPoint(x, y)），但复杂度显著上升，非必要不推荐。
• pointer-events 对 SVG 元素同样有效，适用于混合 DOM/SVG 场景。

✅ 总结：pointer-events: none 是实现“视觉覆盖但交互透传”的标准、轻量且语义清晰的方案。在构建数据可视化层、模态提示、热区标注等场景中，应作为首选技术手段。