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