pointer-events: none 会彻底禁用元素所有鼠标事件并穿透至父级，影响 hover/focus/可访问性，不支持子元素通过 auto 恢复，ie11 对表单元素兼容差，需结合 disabled、aria-disabled、tabindex 等保障语义与交互一致性。
pointer-events: none 会阻止所有鼠标事件，包括 hover 和 focus
它不只是禁用点击，而是让元素完全“透明”给鼠标事件——父元素的 click、hover 甚至 contextmenu 都会穿透过去。如果你只想禁点击但保留 hover 效果，pointer-events: none 不是解法。
常见错误现象：button 加了 pointer-events: none 后，CSS 的 :hover 样式失效，且键盘 Tab 也无法聚焦（它也会影响 focus 可访问性）。
- 只用于视觉层遮罩、临时禁交互的场景（比如加载中蒙层）
- 若需保留 hover 或 focus，改用
cursor: not-allowed+disabled属性或 JS 拦截click - 对
input、textarea等表单控件，pointer-events: none不会自动禁用键盘输入，仍可Tab进去打字
子元素无法通过 pointer-events: auto “抢回”事件捕获
一旦父容器设了 pointer-events: none，所有后代元素默认都失效；即使你给某个子 div 显式写 pointer-events: auto，它依然收不到事件——这是 CSS 规范明确规定的“事件捕获阶段即终止”。
使用场景：想在弹窗上盖一层半透明遮罩，但又希望遮罩里的关闭按钮还能点？别套父子关系硬刚 auto，直接把按钮提到遮罩同级、用 z-index 控制层叠。
-
pointer-events不支持“局部启用”，没有“例外元素”机制 - 替代方案：用两个并列兄弟元素，一个做遮罩（
pointer-events: none），一个放可点控件（不设该属性） - 注意 z-index 必须生效（定位元素），否则兄弟顺序可能错乱
React/Vue 中动态切换 pointer-events 容易遗漏可访问性问题
用 style={{ pointerEvents: isDisabled ? 'none' : 'auto' }} 控制时，视觉上禁用了，但屏幕阅读器和键盘用户可能仍能聚焦、触发 Enter 或 Space。这不是 CSS 的锅，是语义缺失。
错误示范：一个 div 模拟按钮，加了 pointer-events: none 就以为“禁用完成”。
- 必须同步加
tabIndex={-1}（移出焦点流）或aria-disabled="true" - 如果是真实
button，优先用原生disabled属性，它自动处理样式、焦点、语义、键盘行为 - 不要仅靠 CSS 判断交互状态，JS 层也要维护一致的启用/禁用逻辑
IE11 对 pointer-events 的支持有隐性限制
IE11 支持 pointer-events: none，但只对非表单元素（如 div、span）可靠；对 button、input 等，部分版本下仍会响应点击或 focus，尤其在 iframe 内嵌场景。
兼容性影响：如果项目还需支持 IE11，别单独依赖这个属性做核心禁用逻辑。
- 兜底做法：配合
onclick={e => e.preventDefault()}或disabled属性 -
pointer-events在 SVG 元素中 IE11 支持完好，可放心用 - 检查是否触发了 IE 的“怪异模式”——没有正确
会导致该属性完全失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
