点击穿透是指元素不响应鼠标事件而将事件传递给下层元素，必须用pointer-events: none实现，典型场景如遮罩层透传点击、装饰层不干扰交互，它轻量可靠、不触发重排且兼容IE11。
点击穿透是什么，什么时候必须用 pointer-events: none
点击穿透不是“让鼠标点穿页面”，而是让某个元素不响应任何鼠标事件（包括 click、hover、mousedown），把事件“透”给它下面的元素。典型场景：遮罩层上有关闭按钮，但按钮区域之外的遮罩需要透传点击到底层内容；或者 UI 上叠了半透明装饰层，又不想干扰底层交互。
这时候直接设 pointer-events: none 是最轻量、最可靠的解法——它不改变布局、不触发重排，浏览器原生支持，且兼容到 IE11。
pointer-events: none 的继承与边界问题
这个属性默认不继承，但子元素会受父级影响：如果父元素设了 pointer-events: none，所有子元素自动失效，无论自己怎么设都无效。想局部恢复响应，必须在子元素上显式设 pointer-events: auto（或 visiblePainted 等具体值）。
- 错误写法：
div.overlay { pointer-events: none; } div.overlay button { pointer-events: auto; }—— 有效，但前提是button确实是div.overlay的直接/后代子元素 - 常见坑：用了
position: absolute或transform移动了子元素，让它视觉上“浮”在别的元素上，但 DOM 结构里仍被父级none拦截，结果点不动 - 注意 SVG 元素：SVG 中
pointer-events行为更细粒度（如可设fill、stroke单独控制），和 HTML 元素不同
替代方案为什么通常更麻烦
有人试图用 z-index 调层级、或用 visibility: hidden 配合 opacity: 0 来“假装不可见”，但这些都不解决本质问题：
立即学习“前端免费学习笔记（深入）”；
-
z-index只控制绘制顺序，不改变事件捕获路径；即使遮罩在底层，只要它在文档流中且未设pointer-events，依然会拦截点击 -
visibility: hidden会让元素保留占位且仍响应事件；opacity: 0完全不影响事件，默认照样拦截 - 用 JS 手动转发事件（如监听遮罩
click后调用element.click()）容易出时序问题，且无法处理contextmenu、dragstart等复杂事件
移动端要注意的兼容细节
iOS Safari 和 Android Chrome 基本都支持 pointer-events，但有两个实际限制：
- 当元素有
touch-action: none时，pointer-events: none可能被忽略（尤其在滚动容器内），此时需同时确认touch-action值是否合理 - 某些 WebView（如微信内置）对
pointer-events在iframe或fixed元素上的表现不稳定，建议在真机测试，必要时加一层空div做透传代理 - 不要依赖
pointer-events: none来“禁用”表单控件——它只是跳过事件，控件本身仍可聚焦、仍可键盘操作；禁用表单请用disabled属性
真正要小心的是嵌套结构里那层看不见的 pointer-events: none，它不会报错，也不会警告，只默默吞掉你的点击——查不到的时候，先看父级样式。
