pointer-events: none 不改变盒模型，仅跳过事件捕获与冒泡；它不影响 width/height/margin/padding 等几何属性，也不干预渲染顺序或 z-index，只在 hit testing 阶段被忽略。
pointer-events: none 为什么不动 width/height/margin/padding
它根本不是布局属性，只作用于事件分发链。浏览器渲染时照常计算盒模型、生成绘制层、参与文档流——pointer-events 连 layout 阶段都不介入，只在事件捕获/冒泡阶段被跳过。
常见错误现象：box-shadow 被裁剪、内容被遮挡，然后去调 pointer-events，结果毫无作用——问题在 overflow: hidden 或没留 padding，跟事件属性无关。
-
pointer-events: none不改变任何几何属性，getBoundingClientRect()返回值完全不变 - 它不影响
display、position、z-index的计算逻辑 - 即使元素设了
pointer-events: none，它仍能触发:hover伪类？不会——:hover依赖事件目标判定，none后压根不进入 hover 状态
z-index 正常但点击穿透，是不是渲染顺序错了
不是。z-index 控制绘制顺序（paint order），pointer-events 控制事件目标判定（hit testing），两者走的是不同管线。一个元素可以 z-index: 9999 盖住全场，只要设了 pointer-events: none，点击就落到下层；反过来，z-index: -1 的元素若没被遮挡且没设 pointer-events: none，照样能点中。
容易踩的坑：以为“视觉上盖住了 = 事件上也挡住了”，其实事件路径由 hit test 算法决定，优先查 pointer-events 值，再按绘制顺序往下找可响应元素。
- 绝对定位元素堆叠时，穿透路径取决于实际 paint order，不一定是 DOM 顺序
- 父级设了
pointer-events: none，子元素写pointer-events: auto无效——规范明确禁止继承恢复 - 要让关闭按钮可点，得把它和遮罩层变成兄弟节点，靠
z-index和position控制视觉叠放
移动端 touch 事件也穿透吗
是的，现代浏览器（Chrome/Firefox/Safari/Edge）对 touchstart、touchend、touchmove 全部适用 pointer-events: none，但有兼容细节：
- iOS Safari 在 iframe 内嵌内容中偶有不稳定，尤其 Safari 15.4 之前不支持与
touch-action协同 - Android WebView 旧版本（如 Android 4.x）可能直接忽略该属性，需 fallback 到
opacity: 0.01+position: absolute - 设了
pointer-events: none的区域下方若压着<input>，旧版 Safari 可能连软键盘都不弹 - 别依赖它做“禁用 + 动画过渡”，部分安卓机型存在首次触摸延迟，底层元素可能误触发
为什么子元素加 pointer-events: auto 还是点不了
因为 CSS 规范写死了：一旦祖先设了 pointer-events: none，所有后代默认失效，pointer-events: auto 在子元素上无法恢复事件捕获能力——这不是 bug，是设计行为。
典型错误场景：.overlay 设了 pointer-events: none，里面套了个 .close-btn，再写 .overlay .close-btn { pointer-events: auto; }，完全无效。
- 正确解法：把可交互子元素提出来，和禁用容器变成兄弟关系
-
<input>、<select></select>等表单控件不支持子元素接管 focus，不能靠pointer-events: auto恢复点击，必须调整 DOM 结构 - React/Vue 中动态切换 class 时，记得同步处理
aria-disabled和tabIndex，否则键盘用户会卡在不可点元素上
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
