按钮点击穿透是指按钮因pointer-events: none（自身或父级设置）而无法捕获点击事件，导致事件透传至下方元素；修复需确保按钮及其祖先均未被设为none，并显式设pointer-events: auto。
按钮点击穿透是怎么回事
当一个 <button> 叠在另一个元素（比如 <div> 或地图容器）上面，却触发了下方元素的点击事件，不是按钮自己的 click，说明它没“拦住”事件——本质是 pointer-events 被设成了 none，或继承了父级的禁用状态。
为什么 pointer-events: none 会让按钮失效
这个 CSS 属性直接告诉浏览器：“别把我当可交互元素”，不仅点击穿透，连 hover、focus、键盘 tab 都会跳过。常见误用场景：
- 为了“让按钮视觉上透明但还能点”，错误地加了
pointer-events: none（透明该用opacity或background: transparent） - 父容器设置了
pointer-events: none，子按钮没显式覆盖（pointer-events是可继承的） - 用 CSS 框架时，某些“禁用态”类（如
.disabled）偷偷加了pointer-events: none
怎么快速定位和修复穿透问题
打开浏览器开发者工具，选中按钮，在 Styles 面板里搜 pointer-events，重点看三处：
- 按钮自身是否写了
pointer-events: none（包括内联 style） - 它的任意父级是否设置了
pointer-events: none（哪怕只有一层） - 是否有媒体查询或 JS 动态添加了该样式（比如响应式断点下隐藏按钮但忘了还原交互）
修复只需一行：给按钮加 pointer-events: auto（注意不是 all，auto 才是默认行为且兼容性更好）。
立即学习“前端免费学习笔记（深入）”；
pointer-events 的其他坑
它不光影响 click，还控制整个指针事件链：
-
pointer-events: none下，mousedown/touchstart全部不触发，但scroll不受影响 - 设为
auto后，如果按钮被visibility: hidden或opacity: 0，依然能响应事件（只是看不见） - 在 SVG 中，
pointer-events还支持bounding-box、fill等值，HTML 元素不认这些 - IE11 及更早版本不支持
pointer-events（但现代项目基本不用考虑）
最常被忽略的是：父级禁用后，仅给子元素设 auto 不一定生效——得确认整条路径上没有中间节点卡着 none。
