pointer-events 有时没反应是因为它默认继承，父元素设为 none 会屏蔽子元素所有鼠标事件，即使子元素设 auto 也无效；需显式设置子元素 pointer-events: auto。
点击区域重叠时，pointer-events 为什么有时没反应
因为 pointer-events 默认继承，父元素设为 none 会直接屏蔽子元素所有鼠标事件，哪怕子元素自己写了 auto 也没用。常见于绝对定位弹层盖在按钮上、Vue/React 动态插入的浮层遮挡底层操作。
- 必须显式给子元素设置
pointer-events: auto（或visible），不能只靠父级“让出”控制权 - 注意 SVG 元素默认
pointer-events: visiblePainted，和 HTML 元素行为不一致，混用时容易误判 - IE11 及更早版本不支持
pointer-events，移动端基本不用考虑，但若项目需兼容 hybrid 容器内 WebView（如某些老版 Cordova），得加 JS fallback
pointer-events: none 和 visibility: hidden 的实际效果区别
两者都让元素“不可见”，但语义和触发逻辑完全不同：visibility: hidden 仍占布局、仍可被聚焦、仍响应伪类（如 :hover）；而 pointer-events: none 是彻底剥离交互链路，连 focus() 都调用失败，且不影响布局流。
- 想让遮罩层透传点击但保留动画过渡？用
pointer-events: none+opacity或transform - 想临时禁用按钮又保留 tab 键导航顺序？别用
pointer-events: none，该用disabled属性或tabindex="-1" - 配合
z-index调整层级时，pointer-events不影响层叠上下文创建，它只决定“点下去有没有人接”，不是“谁在上面”
React/Vue 中动态控制 pointer-events 的坑
框架里常通过 class 切换来控制样式，但直接写 .overlay--disabled { pointer-events: none; } 很可能被内联样式或更高优先级规则覆盖，尤其在使用 CSS-in-JS 或 scoped style 时。
- 推荐用
style={{ pointerEvents: isDisabled ? 'none' : 'auto' }}直接内联，避免 CSS 优先级干扰 - Vue 模板中不要写
:class="{ 'no-click': disabled }"然后靠外部 CSS 控制，容易因作用域隔离失效 - SSR 渲染时，服务端不会执行 JS 逻辑，
pointer-events状态若依赖客户端计算，首屏可能出现误触——得用useEffect或onMounted延迟启用
替代方案：什么时候不该用 pointer-events
它解决的是“点击穿透”，不是“逻辑禁用”。如果目标是阻止用户执行某操作，比如表单提交前校验失败，硬塞 pointer-events: none 会让屏幕阅读器无法识别按钮状态，也绕过了原生 disabled 的语义与键盘行为。
立即学习“前端免费学习笔记（深入）”；
- 表单控件优先用
disabled属性，它自带语义、禁用 focus、兼容辅助技术 - 需要视觉隐藏但保留可访问性？用
aria-hidden="true"+visually-hidden类，而不是pointer-events: none - 复杂手势场景（如拖拽+点击共存），
pointer-events会一并屏蔽touchstart和mousedown，此时应改用事件委托 +event.stopPropagation()更精准拦截
移动端真机调试时，pointer-events 在部分 Android WebView（尤其是 Android 4.x）里对 touch 事件的支持不稳定，别只靠它做核心交互隔离。
