pointer-events: none仅跳过事件捕获，不改变盒模型、文档流或渲染顺序；z-index控制层叠顺序，与事件判定逻辑完全独立，祖先设none时子元素auto无效。
pointer-events: none 不改变盒模型，只跳过事件捕获阶段
它根本没动盒模型（width/height/padding/margin/position），也不影响文档流或渲染顺序。所谓“交互层级”其实是误解——pointer-events: none 只是让浏览器在事件分发时直接忽略该元素，不把它当作 event.target，也不让它参与事件捕获和冒泡。视觉上它还在那儿，但鼠标事件像穿过空气一样落到下面的元素上。
为什么 z-index 正常但点击还是失效？
因为 z-index 控制的是**渲染层叠顺序**，而 pointer-events: none 控制的是**事件目标判定逻辑**。两者完全独立：
- 即使一个
div的z-index是 9999、盖住整个页面，只要设了pointer-events: none，点击就穿透过去 - 反过来，一个
z-index: -1的元素如果没设pointer-events: none，且没被其他元素遮挡，依然能点中（前提是它没被父级继承禁用） -
z-index生效的前提是元素已定位（position: relative/absolute/fixed/sticky），否则无效——这点常被忽略
子元素加 pointer-events: auto 为什么有时仍点不了？
这是最易踩的坑：CSS 规范明确规定，一旦祖先元素设了 pointer-events: none，所有后代默认都失效，pointer-events: auto 在子元素上**无法恢复事件捕获能力**。
常见错误场景：
- 模态框遮罩层（
.overlay { pointer-events: none; }）里嵌了个关闭按钮（.close-btn），再写.overlay .close-btn { pointer-events: auto; }—— 无效 - SVG 中的
<g></g>设了pointer-events: none，内部<circle></circle>即使显式设auto也收不到 click - React/Vue 中用 class 动态切换
pointer-events，但没同步处理焦点和语义（比如漏掉aria-disabled="true"或tabIndex={-1}）
正确解法：把可交互子元素提出来，和禁用容器变成兄弟关系，靠 z-index 和定位控制视觉叠放。
移动端 touch 事件也受 pointer-events: none 影响吗？
是的，现代浏览器（Chrome/Firefox/Safari/Edge）对 touchstart、touchend 同样适用 pointer-events: none，但有细节差异：
- iOS Safari 在某些版本中对
iframe内嵌内容的pointer-events处理不稳定 - Android WebView 旧版本（尤其 Android 4.x）可能忽略该属性，需 fallback 到
opacity: 0.01; position: absolute; left: -9999px;（但会破坏可访问性） - 不要依赖
pointer-events: none做“临时禁用 + 动画过渡”，部分安卓机型存在微小延迟，首次触摸可能仍触发底层元素
真正难处理的不是样式或层级，而是事件路径与语义的同步——视觉禁用了，键盘 Tab 还能进去，屏幕阅读器仍宣布它是可操作项，这种割裂比点击失效更危险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
