通过 CSS 属性 `pointer-events: none`，可以使绝对定位的遮罩层不再拦截鼠标事件，从而让底层的表格单元格等元素正常响应 mousemove、click 等交互操作，实现事件穿透效果。
在实际的前端开发中，大家经常遇到这样的场景：表格上方叠加了一个半透明、绝对定位的 div——用于高亮、遮罩或拖拽辅助。然而鼠标移上去之后，表格里原本灵敏的 mousemove 事件完全失效，因为所有鼠标事件都被上层 div 截获了。
这是一个非常常见的困惑点。其根源在于，默认情况下任何叠加在内容上的元素都会优先接收鼠标事件，就像一块挡在前面的玻璃板，只顾自身样式，完全无视下面表格单元格的交互需求。
不过解决方法出乎意料地简单：只需为这个覆盖层添加一个 CSS 属性——pointer-events: none。
该属性的作用很纯粹：它让元素彻底“退出”鼠标事件的捕获流程。无论你在上面如何移动、单击或双击，这些事件都会完全绕过它，直接穿透到下方的 DOM 元素（比如 td 单元格）上，从而让 mousemove 等事件恢复应有的表现。
下面这个例子可以直观地展示效果：
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
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，无需额外编写 polyfill 或 hack。
- 注意它与
visibility: hidden或opacity: 0有本质区别——后两者虽然视觉上不可见，但仍然会拦截鼠标事件。真正实现“看不见且不拦截”的效果，还得依靠pointer-events: none。
总结一下，当你在页面上实现视觉覆盖，同时希望保证下层交互流畅时，pointer-events: none 几乎是最理想的选择。它简洁、高效，语义清晰，能完美解决鼠标事件穿透问题。
