移动端穿透必须设 pointer-events: none，opacity: 0 或 visibility: hidden 无法阻止事件拦截；父元素设该属性后子元素 pointer-events: auto 无效；滚动穿透需对下层容器设 pointer-events: none；动画中须精确控制 pointer-events 时机。
移动端穿透必须设 pointer-events: none，不是靠 opacity: 0 或 visibility: hidden
透明浮层（比如用 opacity: 0.01 或 visibility: hidden 实现的蒙版）默认仍会拦截点击——浏览器只看是否参与事件流，不看是否“看得见”。iOS Safari 尤其敏感：哪怕你加了 touchstart.preventDefault()，300ms 延迟窗口内底层按钮仍可能被触发。
真正起效的只有 pointer-events: none。它让浏览器在 hit-testing 阶段直接跳过该元素，事件自然落到下层。注意：opacity 和 visibility 只管渲染，pointer-events 才管事件分发。
-
opacity: 0+pointer-events: none是安全组合；单用opacity: 0不解决穿透 -
visibility: hidden+pointer-events: none多此一举——visibility本身不影响事件流，但保留占位，不如直接用display: none配合 JS 控制显隐 - 不要混用
display: none和pointer-events: none：前者已移出渲染树，后者无效且冗余
父元素设 pointer-events: none 后，子元素写 pointer-events: auto 无效
这是最常踩的坑。例如遮罩层里放一个关闭按钮，结构是：<div class="overlay" style="pointer-events:none"><button class="close">×</button></div>。此时无论按钮上怎么写 pointer-events: auto，它都点不动。
原因：浏览器 hit-testing 时压根不进入这棵子树，根本不会读取子元素的样式声明。这不是 bug，是所有现代浏览器统一行为。
- 可行解法一：把按钮提成兄弟节点，用
z-index和position: absolute视觉上叠上去 - 可行解法二：用伪元素实现遮罩背景，真实按钮保留在主 DOM 流中
- React 场景下优先用
Portal渲染按钮到下，彻底脱离祖先干扰
滚动穿透要处理的是“下层容器”，不是遮罩层本身
用户手指滑动时底层页面跟着滚，问题不在遮罩层“没盖住”，而在它下方那个可滚动的容器（比如 .page-content）仍在响应 touchmove。给遮罩层设 pointer-events: none 对滚动无效。
正确做法：弹窗显示时，给下层滚动容器动态加 pointer-events: none；关闭时恢复为 auto 或移除该样式。注意别误加在 body 或 html 上——这会导致整个页面失焦。
- 安卓 WebView 偶有不稳定，建议搭配
touch-action: none防止滚动干扰 - iOS Safari 中若下层是
<input>，旧版本可能连软键盘都不弹，需真机验证 - 避免用
overflow: hidden拦滚动：它只禁滚动条，不阻止 touchmove 事件传播
动画过渡中 pointer-events 的时机必须精确控制
用 opacity 做淡入淡出时，不能只在初始和结束状态设 pointer-events: none。过渡中间帧（比如 opacity: 0.3）若仍保留 pointer-events: auto，用户就可能点中半透明状态下的浮层。
必须配合 CSS 动画或 JS 过渡回调：动画开始前设 pointer-events: none，动画结束后再移除（或切回 auto）。用 transitionend 事件比单纯依赖 CSS 更可靠。
- 慎用
visibility: hidden做过渡：它不支持 CSS 动画，且设了之后仍可能响应事件 -
display: none无法做平滑过渡，且会触发重排，不适合高频切换场景 - 如果浮层需保持可访问性（如屏幕阅读器），
pointer-events: none不影响tabIndex和 focus，但键盘操作仍需单独测试
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
