pointer-events: none 是子元素点击失效的首要原因，可能来自祖先元素继承；z-index 无效因未定位；flex 拉伸导致热区错位；兄弟元素触发层叠上下文造成覆盖。
子元素点击失效但鼠标悬停有反应，pointer-events 是第一嫌疑
这种“看得见、点不中、但 hover 样式能触发”的情况，大概率是 pointer-events: none 在作祟。它可能没写在目标元素上，而是从祖先节点继承来的——比如父容器加了半透明遮罩层、弹窗蒙版、或某些 UI 框架的默认禁用逻辑。
快速验证：在开发者工具中选中该子元素，展开 “Computed” 面板，搜索 pointer-events。如果值是 none（哪怕带删除线），就说明被覆盖或继承了。
- 临时在控制台执行
getComputedStyle(document.querySelector('.your-btn')).pointerEvents确认真实计算值 - 检查所有父级元素，尤其是
position: fixed或position: absolute的遮罩层 - 注意 SVG 元素内部的
<g></g>或<svg></svg>也可能设了pointer-events: none
点击区域和视觉位置明显错位，z-index 层级没生效
z-index 只对已定位元素（position 值为 relative、absolute、fixed 或 sticky）起作用。Flex 子元素若没设 position，光写 z-index: 99 完全无效，它仍按 DOM 顺序堆叠。
常见陷阱是：按钮在 Flex 容器里，下方紧挨着一个 position: relative 的区块（如表格容器），后者虽无 z-index，却因定位自动创建新层叠上下文，默认层级高于普通流内元素，结果视觉上按钮在上，实际点击被下面的块截获。
- 给可点击子元素加
position: relative; z-index: 1（必须两者同时存在） - 避免给父容器设过高
z-index，否则整个子树都被抬升，可能意外盖住其他模块 - 用开发者工具的 “Layers” 面板（Chrome）或 “3D View”（Firefox）直观查看层叠顺序
Flex 子元素尺寸异常导致热区“漂移”
Flex 默认 align-items: stretch，子元素若没设 height 或 min-height，会被拉伸填满交叉轴高度。此时按钮只有一行文字，视觉上很小，但点击热区却是整块高矩形——你点在文字下方大片空白处，事件照样触发；而真正想点的文字边缘，反而可能落在相邻子项的 padding 或 margin 区域里，被判定为“点在空隙中”。
更隐蔽的是 flex-shrink: 1（默认）导致内容被压缩后换行，或 overflow: hidden 裁剪了部分区域，但点击边界仍按原始盒模型计算。
- 对可交互子项显式设
align-self: flex-start或min-height: fit-content - 临时加
outline: 2px solid red查看真实渲染边界，对比点击位置 - 用
element.getBoundingClientRect()打印坐标，确认鼠标 clientX/Y 是否真落在left/right/top/bottom范围内
兄弟元素视觉覆盖但 DOM 顺序靠后
Flex 不改变 DOM 顺序，但某些样式会让后出现的元素“浮”到前面：比如某兄弟元素用了 transform: translateZ(1px)、will-change: transform，或设置了 opacity ，都会触发新层叠上下文，且默认层级高于未触发的元素。
这种情况在移动端尤其难察觉——因为 transform 和 opacity 常用于动画优化，没人会想到它们悄悄改了点击优先级。
- 逐个禁用兄弟元素的
transform、opacity、filter，观察点击是否恢复 - 检查是否有伪元素（如
::before）设置了content和定位，形成隐形遮罩 - 不要依赖“看起来没重叠”做判断，用
getBoundingClientRect()获取每个元素的真实top/left/width/height，手动比对坐标范围
align-items: stretch 拉高的按钮，又恰好被某个 opacity: 0.99 的兄弟层叠上下文盖住，而它的父容器还继承了 pointer-events: none —— 这时候只改一个地方根本没用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
