正确做法是动画开始前设 pointer-events: none，结束回调中切回 auto；iOS Safari 因渲染与事件线程不同步需改用 visibility 配合手动控制；父设 none 时子 auto 无效，须调整 DOM 结构或伪元素方案。
过渡动画中 pointer-events 切换时机不对，点中半透明遮罩
opacity 动画期间，元素视觉上在淡入/淡出，但只要 pointer-events: auto 还挂着，哪怕 opacity 是 0.1，鼠标照样能点中它——浏览器不看透明度，只看是否参与 hit-testing。
正确做法是把 pointer-events 的切换和动画生命周期对齐：
- 开始动画前（比如调用
element.classList.add('fade-in')前），立刻设pointer-events: none - 动画结束回调（
transitionend或 CSS@keyframes的animationend）里，再切回pointer-events: auto或移除该声明 - 若用 JS 控制动画，读取一次
offsetHeight可强制触发重排，确保pointer-events立即生效
为什么 transition + pointer-events 一起用时 iOS Safari 表现异常？
iOS Safari（尤其 15.4 之前）对 pointer-events: none 和 transition 协同支持弱，常见现象是：遮罩层淡入后仍可点击、或淡出后底层元素点不中。
根本原因是渲染线程和事件线程不同步，且部分旧版 WebKit 不保证 pointer-events 在过渡帧间及时更新。应对策略：
立即学习“前端免费学习笔记（深入）”；
- 避免仅靠
opacity+pointer-events实现“可穿透遮罩”，改用visibility: hidden配合transition: opacity，并在visibility切换前后手动控制pointer-events - 对关键交互区域（如关闭按钮），直接用
display: none/block控制显隐，绕过过渡问题 - 测试时务必覆盖 iOS 15–16 真机，模拟器不可信
父容器设了 pointer-events: none，子元素加 auto 也没用
这是最常被误用的点：pointer-events: none 在父级生效时，整棵 DOM 子树都会被跳过事件捕获，子元素写 pointer-events: auto 完全无效——不是继承失效，而是浏览器压根不往下遍历。
典型翻车场景：弹窗遮罩 .mask 设了 pointer-events: none，然后给里面的 .close-btn 加 pointer-events: auto，结果按钮点不了。
可行解法只有两个：
- 把按钮移出
.mask的 DOM 树，例如用 React Portal 渲染到<body>下，再用z-index层级盖回去 - 不给整个
.mask设none，而是只给它的伪元素（如.mask::before）或背景层设pointer-events: none，保留按钮所在区域为auto
移动端 touch 事件穿透失败，光靠 pointer-events 不够
pointer-events: none 只影响指针事件（click、hover 等），但移动端真实触发的是 touchstart → touchend 链。如果遮罩层监听了 touchstart 却没阻止传播，即使设了 none，也可能因事件冒泡干扰底层。
安全做法是双保险：
- CSS 层：给遮罩设
pointer-events: none - JS 层：在遮罩上监听
touchstart，立即执行event.preventDefault()和event.stopPropagation() - 特别注意安卓厂商浏览器（华为、小米）对
input[type="file"]的穿透支持极差，此时必须 JS 移除遮罩 DOM，而非仅切样式
pointer-events 状态，以及 iOS 上 transition 和事件线程的脱节。 
