直接结论：给遮罩层自身加 pointer-events: none 即可实现事件穿透，使底层 <td> 正常响应 mousemove 等事件；该属性必须作用于遮罩元素本身，而非父容器，且不影响其视觉渲染。
直接结论：给遮罩层加 pointer-events: none 就行，不需要隐藏、不需要计算坐标、不需要 JS 模拟事件。
为什么表格上盖个 div 就点不到 <td>？
绝对定位的遮罩 div 默认会拦截所有鼠标事件（mousemove、click、mouseenter），哪怕它只是 background: rgba(0,0,0,0.2)，浏览器仍把它当作“可点击目标”。此时 event.target 永远是那个遮罩层，不是底层的 <td>。
- 这不是渲染问题，是命中测试（hit-testing）阶段就被截断了
- 用
opacity: 0或visibility: hidden无效——它们只影响视觉，不放行事件 - IE10 及更早版本不支持该属性，但 IE11+、Chrome、Firefox、Safari、Edge 全都支持
pointer-events: none 必须加在哪个元素上？
必须加在**遮罩层自身**，不能加在父容器或表格上。它的作用对象是“被点击的那个元素”，不是整棵 DOM 树。
- 错误写法：
.table-wrapper { pointer-events: none; }→ 表格内部所有交互全废 - 正确写法：
.overlay { pointer-events: none; }→ 遮罩透传，<td>正常接收事件 - 如果遮罩里有关闭按钮，需单独设：
.overlay .close-btn { pointer-events: auto; }，且按钮必须是遮罩的直接子元素
移动端表格穿透要防哪些坑？
iOS Safari 对 pointer-events: none 支持稳定，但几个边界场景容易翻车：
立即学习“前端免费学习笔记（深入）”；
- 遮罩下方压着
<input>或<textarea>时，旧版 Safari（≤15.3）可能连软键盘都不弹 —— 解法：不在编辑器根节点设none，只对纯装饰层（如水印、背景图）设 - 滚动穿透不是靠给遮罩设
none，而是给下层可滚动容器（比如.table-container）动态加pointer-events: none，再在 touchend 后立刻恢复 - 动画中淡入遮罩时，不能只靠
opacity过渡；必须在动画开始前 JS 设置element.style.pointerEvents = 'none'，结束帧同步移除
真正难的不是加那行 CSS，而是判断“谁该透、谁该拦、谁在中间挡了一道”——DOM 层级一深，pointer-events: auto 写在哪一层就决定了按钮能不能点到。
