动画中元素用transform或opacity隐藏时仍拦截点击，因DOM未脱离且未设pointer-events:none；正确解法是动画前加该属性禁用交互，结束后移除，同时避免父级设none导致子元素auto失效。
动画中元素视觉移位但 DOM 未脱离，导致 click 穿透到底层
常见于用 transform: translateX(100px) 或 opacity: 0 隐藏元素时，它仍占据事件捕获路径——用户“看不见也点不着”，但底层元素却意外响应了 click。这不是 bug，是浏览器按渲染树检测 hit-test 的必然结果。
关键判断：只要该元素在 DOM 中、没被设 pointer-events: none、且没被 display: none 移出渲染树，它就可能拦截或透传事件，取决于其样式状态。
-
opacity: 0或visibility: hidden→ 元素仍参与事件捕获，默认照常拦截 click -
transform移出视口 → 不影响事件区域，hit-test 仍基于原始布局盒（除非同时加pointer-events: none） -
display: none→ 元素完全退出渲染树和事件流，click 必然落到下层，但会触发重排
用 pointer-events: none 控制动画期间的事件响应边界
这是最轻量、无重排、兼容性稳（IE11+）的解法，但必须理解它的作用时机和层级限制。
典型错误写法：.animated { animation: slideOut 0.3s; pointer-events: none; } —— 动画一结束，元素立刻恢复 auto，但你没控制“何时启用/禁用”。
- 推荐配合 CSS 类切换：动画开始前加
.is-animating，并设pointer-events: none；动画结束后移除该类 - 若用
@keyframes，不能在中间帧动态改pointer-events（CSS 动画不支持该属性插值） - React/Vue 中建议用
onAnimationEnd回调同步更新 class 或 style，避免靠 timeout 猜时机
父容器设 pointer-events: none 后，子元素加 auto 也没用
这是高频翻车点：以为给遮罩层设 pointer-events: none，再给里面的关闭按钮设 pointer-events: auto 就能点，结果按钮完全无响应。
原因：浏览器事件检测自顶向下，父级为 none 时直接跳过整棵子树，子元素的 auto 声明被忽略。
- 正确做法：把需要交互的子元素（如关闭按钮）从父容器中移出 DOM，用 Portal 渲染到
下，再用绝对定位归位 - 次选方案：不设父级
none，改用pointer-events: auto+ JS 判断event.target === overlay来区分点击区域 - 切忌嵌套使用
none和auto试图“局部启用”，在多数 WebView（尤其微信）上行为不可靠
移动端 touch 事件下 pointer-events: none 的隐性失效
iOS Safari 和 Android Chrome 虽支持该属性，但有两个真实限制场景容易漏测：
- 当元素或其祖先设置了
touch-action: none（比如滚动容器内），pointer-events: none可能被忽略，导致 touchstart 不穿透 - fixed 定位元素 +
pointer-events: none在部分安卓 WebView 中对 input 触发软键盘无效，需真机验证 - 解决方案不是加更多 CSS，而是降级：在 touch 设备上，改用
z-index分离图层 +pointer-events: auto配合event.stopPropagation()显式控制
复杂点永远在边界：动画 + 定位 + 移动端 + WebView，四者叠加时，pointer-events: none 不是银弹，得留一手 JS fallback。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
