给遮罩层加 pointer-events: none 可实现事件穿透至表格，但必须作用于直接覆盖表格的定位元素，确保 z-index 合理、不滥用 transform/opacity，关闭按钮需与遮罩同级，移动端需防软键盘异常，动画中需同步切换 pointer-events。
表格上方遮罩层加 pointer-events: none 就能穿透
只要遮罩 div 是直接盖在表格上、且自身有定位（position: absolute 或 fixed），给它加 pointer-events: none 后，mousemove、click 等事件会直接落到下方的 table、td 或 tr 上，event.target 也会准确指向这些底层元素。
常见错误是把 pointer-events: none 加在表格父容器或 body 上——那不是穿透，是全局禁用。必须作用于那个“真正盖住表格”的遮罩元素本身。
- 遮罩必须有明确层叠顺序：确保它的
z-index高于表格，但低于需要交互的按钮等控件 - 避免给遮罩加
transform或opacity（除非同步控制pointer-events），否则可能创建新层叠上下文，干扰事件路径 - IE11 对
td的事件捕获略保守，若遇兼容问题，可临时给td加position: relative
遮罩里有关闭按钮？别塞进遮罩 DOM 里
如果遮罩内部有个 .close-btn，不能靠“遮罩设 none + 按钮设 auto”来救——浏览器在事件捕获阶段就跳过整个遮罩子树，pointer-events: auto 在父级为 none 时完全无效。
正确做法是把按钮抽出来，和遮罩平级：
再用 CSS 控制层级：
.overlay { position: absolute; pointer-events: none; z-index: 10; }
.close-btn { position: absolute; z-index: 11; }
移动端表格穿透要防软键盘不弹
iOS Safari（≤15.3）和部分安卓 WebView 对 pointer-events: none 下压着 input 或 textarea 的场景支持不稳定，可能出现点击单元格内编辑器却打不开软键盘。
- 不要在表格外层容器（如
.table-wrapper）设pointer-events: none - 只对纯装饰性遮罩（如水印、半透明背景层）设该属性
- 若表格含可编辑单元格，改用伪元素
::before绘制遮罩，并对其单独设pointer-events: none - 滚动穿透是另一回事：需动态给表格外层滚动容器切
pointer-events: none，而非遮罩本身
动画中 pointer-events 切换时机比 opacity 更关键
用 opacity 做遮罩淡入时，如果只在开始和结束设 pointer-events: none，中间过渡帧仍可能响应点击——用户会点中半透明状态下的表格单元格。
必须严格同步：
- 动画触发前，立即执行
overlay.style.pointerEvents = 'none' - 动画结束回调中，再设回
'auto'或移除该内联样式 - 避免和
visibility: hidden混用：它不影响事件流，加了也没用 - React/Vue 中推荐用 class 切换（如
overlay--fading），CSS 里统一控制pointer-events和opacity
真正容易被忽略的是：pointer-events: none 不影响键盘焦点和屏幕阅读器，如果遮罩本意是“临时禁用”，还得配 aria-hidden="true" 和 tabIndex="-1"。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
