pointer-events不影响盒模型，因它仅作用于事件命中测试阶段，不参与layout计算；元素尺寸位置由layout决定，而是否响应点击由paint后的hit-test决定。
pointer-events 不影响盒模型，因为它不参与 layout 阶段
浏览器渲染分三步：layout（计算尺寸/位置）、paint（绘制像素）、composite（合成图层）。pointer-events只在 paint 后的「事件命中测试」阶段起作用，而盒模型（width/height/margin/padding）早在 layout 阶段就已确定。换句话说，元素有多大、在哪，跟它“愿不愿意被点”是两套独立机制。
这导致一个常见错觉：给一个 div 加了 pointer-events: none，再用 getBoundingClientRect() 查它，返回的仍是原始矩形——哪怕它视觉上被 clip-path 裁成三角形，或被 opacity: 0 隐形，它的事件热区始终是那个没裁、没缩、没隐藏的原始盒子。
为什么 click 仍能触发到被 pointer-events: none 遮盖的下层元素？
因为事件捕获路径是按 DOM 树 + 层叠上下文顺序走的，但最终目标由「命中测试」决定。设为 none 的元素不会被选为 event.target，浏览器会继续往下找——不是跳过 DOM 节点，而是跳过该节点的 hit-testing，把点击穿透过去。
- 父元素设
pointer-events: none，子元素设auto→ 子元素仍可点（子元素能恢复响应） - 同级两个
div，上面的设none、下面的没设 → 点击直接落到下面那个上 - 如果下层元素也设了
none，或没有可命中元素 → 点击最终落在body或document
哪些操作会让“看起来禁用了”，其实热区还在？
这是最常踩的坑：以为视觉不可见 = 无法点击，结果用户一 Tab 键聚焦、一回车就触发了。
立即学习“前端免费学习笔记（深入）”；
-
opacity: 0或visibility: hidden→ 元素仍可被点击、可聚焦、可被键盘操作 -
display: none→ 真正移出渲染树，热区消失，但 DOM 节点还在，只是不参与 layout/paint/hit-test -
pointer-events: none→ 视觉照常显示，但鼠标事件穿透；键盘焦点不受影响（tabindex、focus()仍有效） - 伪元素（
::before/::after）设pointer-events: auto→ 完全无效，伪元素不是 DOM 节点，压根不进事件路径
想让视觉区域和点击热区一致，光靠 pointer-events 不够
pointer-events 只能开关整块盒模型的响应，不能做形状级控制。比如你用 clip-path: polygon(0 0, 100% 0, 50% 100%) 裁出一个三角形按钮，它的热区仍是原始矩形——用户点在左下角空白处，照样触发 click。
要对齐，得额外处理：
- 纯 CSS：用
pointer-events: none关掉原元素，再叠一层同路径的<svg><path></path></svg>，设fill="transparent" pointer-events="auto" - JS 方案：监听
click，用element.getBoundingClientRect()换算坐标，再用射线法判断是否落在polygon()顶点围成的区域内 - 移动端务必真机测：iOS Safari 对靠近裁剪边界的点击判定偏宽松，Chrome for Android 更严格，仅靠 DevTools 的小图标预览会误判
真正复杂的从来不是“怎么禁用”，而是“禁用到什么程度”——鼠标、键盘、读屏、自动化工具，每种通道的拦截逻辑都不同，pointer-events 只管其中一条路。
