pointer-events: none 并非禁用点击而是让元素退出鼠标事件流；加在父容器上子元素无法通过 auto 恢复响应；原生表单控件应优先用 disabled 属性保障语义与交互完整性。
pointer-events: none 是最直接的禁用鼠标点击的 CSS 方案，但它不是“禁用点击”而是“让元素彻底退出鼠标事件流”。只要写对作用域、避开语义控件、补上可访问性处理，就能稳住效果。
为什么加了 pointer-events: none 还能点中？
常见错误是把该规则加在父容器上，又指望子元素（比如按钮、图标）靠 pointer-events: auto 恢复响应——这在规范里完全无效。浏览器在事件捕获阶段就跳过整个子树，子元素再设 auto 也收不到任何事件。
- 典型翻车场景：遮罩层
.mask设了pointer-events: none，里面放个关闭按钮并加pointer-events: auto，结果按钮点不了 - 正确做法：把按钮从遮罩 DOM 内部移出，和遮罩同级，用
z-index叠在上面 - 若结构不能动，改用 JS 监听遮罩的
pointerdown，手动判断event.target.closest('.close-btn')后分发逻辑
哪些元素不该用 pointer-events: none 替代 disabled？
对 <button></button>、<input>、<select></select>、<textarea></textarea> 这类原生表单控件，优先走 disabled 属性。它不只是视觉灰化，还会自动：
- 排除表单数据提交（
pointer-events: none下 value 仍会被序列化） - 移出焦点流（
tabindex自动失效，而pointer-events: none不影响Tab聚焦） - 触发屏幕阅读器播报“已禁用”状态（
pointer-events: none对语义层零干预） - 禁用 Enter/Space 键激活（
pointer-events: none对键盘事件完全无感）
动态切换时容易漏掉的关键点
用 class 或内联 style 切换 pointer-events 值，只是改了样式，不等于完成了交互状态同步：
- React/Vue 中，光切
pointer-events-none类还不够，必须同步更新组件的disabledprop 或 DOM 的disabled属性 - 如果是自定义按钮（比如
<div role="button">），得额外加 <code>tabindex="-1"和aria-disabled="true"，否则键盘用户仍能聚焦并按回车触发 - 动画中切换时，部分浏览器存在微小延迟：视觉已显示禁用态，但首次点击仍生效；建议在淡入开始前就设
none，结束回调里再切回auto - 遮罩层如果用了
pointer-events: none，用户可能意外点中背后按钮，尤其当遮罩是半透明且没占满全屏时 - 多个重叠元素堆叠时，点击位置触发的是 DOM 顺序最靠前的那个非
none元素，和视觉层级无关 - 伪元素（如
::before）默认独立参与事件捕获，需单独设pointer-events: none，否则它会抢走点击
穿透行为的真实影响比想象中更底层
pointer-events: none 让鼠标“穿过”该元素，落到它下方第一个 pointer-events: auto 的元素上——这个“下方”不是按 z-index，而是按 DOM 渲染顺序找。这意味着：
