pointer-events: none 是CSS属性，使元素完全不参与鼠标事件捕获与冒泡，浏览器直接跳过它作为事件目标；它不影响布局、焦点、语义或动画，子元素需显式设 pointer-events: auto 才可交互。
pointer-events: none 是什么，为什么它能禁用点击
它不是“隐藏”或“屏蔽”事件，而是让元素在事件捕获/冒泡阶段直接被跳过——浏览器压根不把它当点击目标。父元素设了 pointer-events: none，子元素哪怕写了 pointer-events: auto 也无效（除非显式重置为 visible 或 auto）。
常见错误现象：click 事件没触发，但 console.log 显示事件对象里 target 还是这个盒子；或者以为加了 disabled 就够了，结果发现 div、span 根本不支持 disabled 属性。
怎么给盒子正确设置 pointer-events: none
直接写 CSS 规则即可，无需 JS 干预。关键是作用范围和继承行为要心里有数：
-
pointer-events: none对所有鼠标事件生效（click、mousedown、hover等），不只是点击 - 它不影响键盘焦点（
tab仍可聚焦）、不影响aria语义、也不影响动画或布局 - 如果盒子内有按钮、链接等可交互子元素，且你只想禁用盒子本身、保留子元素可用，得单独给子元素设回
pointer-events: auto - IE11 及以下不支持，如需兼容，得 fallback 到
opacity: 0.01; position: absolute; left: -9999px;这类 hack（但会破坏语义和可访问性）
示例：
立即学习“前端免费学习笔记（深入）”；
.mask {
pointer-events: none;
}
.mask button {
pointer-events: auto;
}
什么时候不该用 pointer-events: none
它解决的是“不想响应点击”，不是“不想被看见”或“不想参与交互逻辑”。容易踩的坑：
- 想禁用表单控件时，优先用原生
disabled（input、button、select），否则屏幕阅读器可能无法识别禁用状态 - 做模态框遮罩层时，如果只靠
pointer-events: none而没控制z-index和层级，可能导致底层内容意外被点中 - 动画中动态切换
pointer-events值（比如从none切到auto），部分浏览器存在微小延迟，视觉上已出现，但首次点击仍失效 - React/Vue 中通过 class 切换控制时，别忘了在组件卸载前清理副作用（比如移除
document.addEventListener('click', ...)），否则残留监听器可能误判目标
替代方案：disable 的语义化写法 vs pointer-events 的视觉隔离
两者目的不同，选错会导致可访问性问题或维护混乱：
- 表单控件必须用
disabled属性——它自带样式灰化、语义明确、键盘不可聚焦、屏幕阅读器播报“已禁用” -
pointer-events: none更适合装饰性容器、蒙层、图表图例、临时禁用非表单区域（比如地图上的标注气泡） - 若需同时禁用 + 灰化 + 不可聚焦，CSS 要配齐：
pointer-events: none; opacity: 0.5; tab-index: -1;，但不如原生disabled省心 - 某些场景（如 Canvas 内部热区）根本没法用
disabled，这时pointer-events: none是唯一干净解法
真正麻烦的是混合场景：一个 div 里既有按钮又有文字说明，既要禁用整体点击，又得保留按钮可用——这时候得小心层级和重置规则，稍不注意子元素就跟着失效了。
