pointer-events: none 不生效的主因是父元素未生效或子元素显式设为 auto 覆盖；它使元素及后代不参与鼠标事件目标计算，但不影响键盘焦点与语义状态。
pointer-events: none 为什么有时不生效
直接写 pointer-events: none 却发现子元素还能点，大概率是父元素没生效、或被后代元素的 pointer-events: auto 覆盖了。这个属性不是“开关式禁用”，而是逐层参与事件捕获和冒泡的判定——它让元素及其所有后代都**不参与鼠标事件目标计算**，但前提是该样式确实应用到了目标元素上。
常见踩坑点：
- 父容器设了
pointer-events: none，但子元素显式写了pointer-events: auto，此时子元素恢复响应（注意：仅对鼠标事件有效，focus、键盘操作不受影响） - 使用
display: none或visibility: hidden时，pointer-events已无意义——元素本就不在渲染树中或不可见，自然不会接收事件 - SVG 元素默认行为不同：
内的none会阻止其自身及内部子元素响应，但需确认是否被z-index层叠上下文干扰
怎么安全地禁用整个区域的点击交互
最稳妥的做法是作用于最外层容器，并确保后代没有重置该属性。如果组件结构复杂、第三方库可能注入带 pointer-events 的内联样式，建议用更强选择器覆盖：
.disabled-section {
pointer-events: none;
}
.disabled-section * {
pointer-events: none;
}
注意：* 通配符会影响性能，仅在必要时使用；若只禁用按钮类交互，更推荐精准控制：button, a, input, select, textarea 等可交互元素单独加规则。
补充场景：
- 模态框遮罩层需透传点击到底层？设遮罩
pointer-events: none，再给内部按钮设pointer-events: auto - 想保留滚动但禁用点击？
pointer-events: none会同时禁掉scroll（因为滚动依赖mousedown/touchstart），此时应改用cursor: not-allowed+ JS 阻止默认行为
pointer-events 在不同浏览器中的兼容性差异
现代浏览器（Chrome 4+、Firefox 3.6+、Safari 4+、Edge 12+）对 pointer-events 支持良好，但有两个关键例外：
- IE 完全不支持
pointer-events（包括 IE11），若需兼容，必须用 JS 绑定空事件处理器或动态移除onclick属性 - Safari 对 SVG 中
pointer-events的解析有历史 bug：某些版本下引用的符号，即使父级设了none，仍可能响应点击；解决方式是给标签本身也加样式
检测是否可用可借助 CSS @supports：
@supports (pointer-events: none) {
.interactive { pointer-events: none; }
}
替代方案：什么时候不该用 pointer-events: none
当目标是“视觉禁用 + 语义禁用 + 键盘不可达”时，pointer-events: none 就不够用了——它不影响 tabindex、不改变 ARIA 状态、也不阻止键盘焦点进入。真正需要完全禁用交互的控件，应该：
- 添加
disabled属性（适用于button、input等原生可禁用元素） - 设置
aria-disabled="true"并配合tabindex="-1"移出焦点流 - 用 JS 监听
click、keydown并event.preventDefault()
单纯靠 CSS 拦截，对辅助技术用户是不友好的。真实项目里，禁用逻辑往往要横跨样式、属性、JS 和语义层协同处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
