移动端点击穿透是视觉存在但未禁用事件响应的元素（如opacity:0或visibility:hidden的遮罩层）仍捕获并冒泡事件，尤其iOS Safari中300ms延迟窗口内底层按钮可能被触发。
移动端点击穿透到底是哪层在“透”
不是遮罩层没盖住，而是它默认 pointer-events: auto，事件照常捕获并向下冒泡——尤其在 iOS Safari 中，哪怕你加了 touchstart.preventDefault()，底层按钮仍可能在 300ms 延迟窗口内被触发。真正“透”的是那个视觉存在、DOM 存在、但没关掉事件响应的元素，比如用 opacity: 0 或 visibility: hidden 隐藏的导航栏、弹窗蒙版、水印图层。
为什么给遮罩层设 pointer-events: none 后关闭按钮点不了
因为 pointer-events: none 是自顶向下的硬拦截：父元素设了，整棵子树（包括子元素写的 pointer-events: auto）都会被跳过，浏览器压根不把事件分发到那层 DOM 节点。这不是 bug，是所有现代浏览器（Chrome/Firefox/Safari）统一行为。
- 错误做法：
.modal-overlay { pointer-events: none; }+.close-btn { pointer-events: auto; } - 正确做法：把
.close-btn移出.modal-overlay的 DOM 子树，例如用 Portal 渲染到<body>下，再靠z-index控制层级 - 或换结构：只对遮罩的「非按钮区域」设
pointer-events: none，按钮所在区域保持auto
pointer-events: none 在移动端的真实兼容边界
iOS Safari 支持 pointer-events: none 对 touchstart/touchend 生效，但 Safari 15.4 之前不支持与 touch-action 协同；更关键的是：若 none 层下面压着一个 <input>，旧版 Safari 可能连软键盘都不弹。安卓 WebView 则偶有不稳定，建议搭配 touch-action: none 防止滚动干扰。
- IE11 完全不支持该属性对 HTML 元素生效，需降级为
display: none+ JS 模拟显隐 - 滚动穿透（手指滑动时底层页面跟着滚）也能用它解决：不是给遮罩层设
none，而是给遮罩层**下方**的可滚动容器（如.page-content）动态加pointer-events: none -
pointer-events: none不影响focus、tabIndex或屏幕阅读器，键盘可访问性需单独保障
动画过渡中 pointer-events 的时机陷阱
用 opacity 做淡入淡出时，不能只写 opacity: 0; pointer-events: none 就完事——过渡期（比如 opacity 从 1→0 的中间帧）若仍残留 pointer-events: auto，用户就可能点中半透明状态下的元素。
立即学习“前端免费学习笔记（深入）”；
- 必须配合 CSS 动画或 JS 过渡回调：动画开始前设
pointer-events: none，结束后再移除（或切回auto） - 避免和
visibility: hidden混用：它不影响事件流，visibility: hidden + pointer-events: none看似保险，实则多此一举 - 若依赖元素尺寸做 JS 计算（如测量导航栏高度），别用
display: none，改用opacity: 0 + pointer-events: none更安全
<div class="nav open">，却写了 .nav .open（后代选择器），而它需要的是 .nav.open（类名连写）。 
