根本原因是pointer-events: none未作用于真正覆盖目标的遮罩元素本身；必须确保该样式仅加在直接定位覆盖目标（如表格/按钮）的绝对或固定定位div上，且其z-index足够高、无transform/opacity等导致堆叠上下文断裂，并将关闭按钮移出遮罩dom子树与之平级。
广告遮罩层无法被点击穿透，根本不是“要不要加 pointer-events: none”的问题，而是它是否作用在真正盖住目标的那一个 DOM 节点上——错一层，就全失效。
为什么 pointer-events: none 加了却没用？
最常见错误是把该样式加在广告容器父级、body 或全局 wrapper 上，而不是那个**直接定位覆盖表格/按钮/视频区域的遮罩 div**。浏览器事件路径只认“视觉叠层中最近的那个可交互元素”，加在别处等于对空气设规则。
- 用 DevTools 的 Elements 面板选中遮罩层，确认其
position是absolute或fixed，且z-index确实高于下方目标 - 检查它是否被 transform/opacity/filter 等属性意外创建了新堆叠上下文，导致事件路径断裂（此时即使加
pointer-events: none也无效） - IE11 对
td的事件捕获较弱，若遇穿透失败，可临时给td加position: relative建立明确事件接收面
遮罩里有关闭按钮，怎么不让它一起失效？
pointer-events: none 会彻底跳过整个子树，.close-btn 设成 auto 也救不回来。必须把它从遮罩内部移出来，和遮罩平级。
- DOM 结构要写成：
<table></table>+<div class="ad-overlay"></div>+<button class="ad-close"></button> - CSS 中确保
.ad-overlay的z-index: 1000，.ad-close的z-index: 1001，且都基于同一position: relative父容器 - 移动端注意：iOS Safari ≤15.3 在
pointer-events: none下压着input时软键盘可能不弹，这种场景应改用伪元素::before绘制遮罩
广告含可滚动内容时，如何防 touchmove 误杀？
遮罩层上无差别 preventDefault() 会封死广告内部的轮播图、列表或表单滑动。必须精准放行。
- 给广告内可滚动区域加统一 class，比如
class="ad-scrollable" - 遮罩的
touchmovehandler 中用e.target.closest(".ad-scrollable")判断，匹配到就跳过preventDefault() -
addEventListener必须显式传{ passive: false }，漏写在 Chrome/Firefox 中等于没绑定 - DOM 深度超过 6 层时，
touchmove延迟明显，可能导致“有时能滑、有时不能”——用 DevTools 右键节点 →Show DOM properties查 depth，超限就用display: contents抹掉无意义包裹
真正的难点不在样式或 JS 写法，而在于每次新增广告位时，都要重新确认遮罩是否仍精准覆盖目标区域、是否还被某个未察觉的 transform 或 opacity 锁死事件流——这类问题不会报错，只会静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
