直接加 pointer-events: none 可使元素不参与鼠标事件流，click、hover 等全部失效，且不继承、不影响兄弟节点；但子元素设 auto 也无法恢复响应，需用 portal 或局部控制解决。
直接加 pointer-events: none 就能禁用鼠标点击
它让元素在事件捕获和冒泡阶段被浏览器跳过，click、mousedown、hover 全部失效，连鼠标手型（cursor）都会变回默认箭头。不是“屏蔽”，是“不参与事件流”。
常见错误是给错目标：比如想让遮罩层下的按钮点不了，结果却给按钮本身加了 pointer-events: none——这反而会让按钮点不了，但遮罩层仍挡着视觉；正确做法是给遮罩层加，让点击穿透到底层。
- 只对当前元素生效，不继承也不影响兄弟节点
-
position必须确保该元素真正在视觉上盖住目标（absolute/fixed+ 合理z-index） - 伪元素（如
::before）需单独设pointer-events: none，否则它会独立拦截
子元素不能靠 pointer-events: auto “抢回”点击
父元素设了 pointer-events: none，所有后代默认都被跳过，哪怕你给子 button 显式写 pointer-events: auto，它也收不到事件——这是 CSS 规范明确规定的，不是浏览器 bug。
所以别写这种结构：
<div class="mask" style="pointer-events: none;"> <button class="close-btn" style="pointer-events: auto;">×</button> </div>
它在所有现代浏览器里都无效。正确解法只有两个：
- 把可点的子元素（如关闭按钮）移出该 DOM 树，用 Portal 渲染到
下，再用z-index控制层级 - 不设父级
none，改用局部控制：比如只给遮罩层的“非按钮区域”加pointer-events: none，按钮所在区域保持auto
禁用点击 ≠ 禁用交互，键盘和表单仍照常工作
pointer-events: none 对键盘事件完全无感。用户仍可 Tab 进去，按 Enter 或 Space 触发 click，input 依然能打字，表单提交时该字段的 value 也会被序列化——它只是鼠标/触控层面的“透明”。
所以如果你要真正禁用一个 button 或 input：
- 优先用原生
disabled属性：它自动处理焦点、语义、样式、表单排除 - 如果必须用 CSS 控制（比如加载中按钮要保留 value），就得手动补全：
tabindex="-1"+aria-disabled="true"+cursor: not-allowed+ 视觉灰度（如opacity-70） - 权限类禁用必须后端校验，CSS 层面纯属前端提示，毫无安全性
移动端和旧版浏览器有隐性坑
iOS Safari 15.4 之前不支持 pointer-events: none 与 touch-action 协同；安卓部分 WebView（华为、小米）对嵌套多层 none 支持不稳定；IE11 对 button、input 的 none 行为也不可靠。
更麻烦的是动画场景：用 opacity 做淡入淡出时，如果只在开始/结束帧切 pointer-events，中间半透明状态可能仍响应点击。正确做法是动画开始前立即设 pointer-events: none，结束回调里再切回 auto 或移除。
最常被忽略的一点：它让点击“按渲染顺序往下找”，不是按 z-index，而是按 DOM 顺序找第一个 pointer-events: auto 的元素——遮罩层、图标叠加、弹窗嵌套时，这点极易导致误操作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
