button加pointer-events:none会彻底禁用所有鼠标交互（点击、hover、焦点），但视觉不变；它不替代disabled，且父元素设none会使子元素auto失效，需抽离dom或分区域控制。
button 元素加 pointer-events: none 会怎样？
直接让 button 失去所有鼠标交互能力——点不动、hover 不生效、无法获得焦点（即使它没被 disabled），但视觉上照常显示。这不是“禁用”，而是告诉浏览器：“别把我当点击目标”。
常见误用场景：button 已有 disabled 属性，再加 pointer-events: none 是冗余的；但若你用 CSS 模拟禁用（比如只设 opacity: 0.5），就必须配 pointer-events: none 才能真正阻止点击。
为什么给父容器设 pointer-events: none，button 就点不了？
因为浏览器在命中测试（hit-testing）阶段，一旦遇到 pointer-events: none 的祖先元素，整棵子树都会被跳过——哪怕 button 自己写了 pointer-events: auto，也根本不会被检测到。
典型错误结构：
.overlay { pointer-events: none; }
.overlay .close-btn { pointer-events: auto; } /* ❌ 无效 */
解决方向只有两个：
- 把按钮从遮罩 DOM 树中抽出来，作为兄弟节点存在（比如用 Portal 渲染到
下） - 只对遮罩的“非按钮区域”设
pointer-events: none，按钮所在区域保持默认或显式设auto
移动端 button 点击穿透的特殊限制
iOS Safari（≤15.3）和部分安卓 WebView 对 pointer-events: none 的处理有坑：
若穿透层下方压着 <input> 或 <textarea></textarea>，软键盘可能不弹；input[type="file"] 在华为、小米等厂商 WebView 中常忽略 none，必须 JS 临时移除 DOM 才可靠。
滚动穿透不是靠给遮罩设 none，而是要动态给底层可滚动容器（如 .page-content）加 pointer-events: none，并在 touchend 后立刻切回 auto。
动画中 button 的 pointer-events 切换时机怎么控？
用 opacity 做淡入时，不能只靠 opacity: 0 + pointer-events: none 一劳永逸——中间过渡帧若仍为 auto，用户就可能点中半透明状态下的按钮。
正确做法：
- 动画开始前，同步设
pointer-events: none - 动画结束回调里，再切回
auto或移除该样式 - 必要时强制重排（如读取
offsetHeight），避免浏览器延迟应用新值
最易被忽略的是：伪元素（如 ::before）绘制的按钮装饰层，也得单独设 pointer-events: none，否则它会独立捕获事件，导致真实按钮点不中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
