pointer-events: none 使元素屏蔽所有鼠标事件并透传给z-index紧邻下一层，但需确保中间所有父层均设该属性；不影响focus/键盘操作和JS触发click；SVG建议显式设auto；局部禁用应仅作用于子元素；disabled表单控件无需额外设置；移动端需真机测试穿透效果。
pointer-events: none 会让元素完全不响应鼠标事件
这是实现点击穿透最直接的方式，但很多人误以为它只是“禁用点击”，其实它会屏蔽所有鼠标事件（click、hover、mousedown、contextmenu等），且事件会透传给下层可交互元素。关键点在于：透传只发生在视觉堆叠顺序（z-index）下的**紧邻下一层**，不是跳过所有层直达最底层。
常见错误是给一个遮罩层加了 pointer-events: none，却发现点击没触发底下的按钮——往往因为中间还有一层未设该属性的父容器挡住了事件流。
- 必须确保从目标元素向上到最近的非
pointer-events: none祖先之间，所有中间层都设为pointer-events: none，否则事件会在那里被拦截 -
pointer-events: none不影响focus或键盘操作，也不影响 JS 主动触发的.click() - SVG 元素默认支持
pointer-events，但某些旧版 Android WebView 对auto值解析异常，建议显式写pointer-events: auto恢复行为
需要局部禁用点击时，别用 pointer-events: none 粗暴覆盖
比如一个带图标的按钮，只想让图标区域不可点，文字区域仍可点。这时如果对整个按钮设 pointer-events: none 就全废了。正确做法是只对图标部分设置，并保持父容器可交互。
<button class="btn"> <span class="icon" style="pointer-events: none;">ⓘ</span> Submit </button>
注意：如果图标是伪元素（::before），它本身不能设 pointer-events，得包一层真实元素；若用背景图，则需用透明占位元素覆盖并设 pointer-events: none。
立即学习“前端免费学习笔记（深入）”；
- 不要在父元素上设
pointer-events: none后，再试图用子元素设pointer-events: auto来“恢复”——CSS 中该属性不继承，且子元素无法覆盖父级的none效果 - 动画中动态切换
pointer-events时，注意浏览器重绘时机，某些情况下需配合force reflow（如读取offsetHeight）才能立即生效
pointer-events 在 disabled 表单控件中的表现很特殊
原生 <button disabled> 或 <input disabled> 默认就无视鼠标事件，此时再加 pointer-events: none 是冗余的；但如果你用 CSS 模拟 disabled 状态（比如只加灰阶和 opacity: 0.6），那必须手动加 pointer-events: none 才能阻止点击。
- 表单控件的
disabled属性优先级高于pointer-events，即：即使设了pointer-events: auto，disabled依然生效 - 用
fieldset[disabled]包裹一组控件时，内部所有控件都会被禁用，此时单独给某个子控件设pointer-events: auto无效 - React 中通过 props 控制
disabled时，别忘了同步控制pointer-events——尤其当用 styled-components 或 Tailwind 动态类名时容易遗漏
移动端 touch 事件穿透需要额外验证
pointer-events: none 在绝大多数现代浏览器中对 touchstart、touchend 同样生效，但 iOS Safari 在某些混合滚动场景（比如 overflow: scroll 容器内）下可能因事件捕获机制导致穿透失败。
- 真机测试必不可少，模拟器常有偏差；可在目标底层元素加
console.log验证是否真被触发 - 若穿透失效，检查是否有
-webkit-overflow-scrolling: touch或contain: paint干扰了事件路径 - 极少数情况需搭配
touch-action: none（仅用于禁止手势，不影响点击穿透），但两者作用域不同，别混淆
pointer-events: none，或者误以为伪元素能独立响应事件。动手前先用浏览器开发者工具的“选择元素并显示事件监听器”功能，逐层确认事件是否真的到达目标节点。 
