1. 原因与机理
1.1 按下阶段的 :active 行为
在浏览器中，:active 状态通常只在用户按下鼠标时存在，表示“当前被按下”的瞬间。对于父元素而言，进入 :active 状态时，它的子元素是否能接收点击事件会受到层叠关系和覆盖结构的影响。
如果父元素在 :active 时通过样式或伪元素创建了覆盖层，子元素的点击事件就可能被父层的覆盖层截获，从而出现子元素看似不可点击的现象。
1.2 伪元素覆盖与事件拦截
常见的做法是在父元素的 :active 状态下借助伪元素（如 ::before、::after）来实现视觉反馈。当伪元素覆盖在子元素上方，如果它也参与了鼠标事件的接收，则子元素就无法接收到点击。
解决思路是让伪元素对鼠标事件“不可捕获”，通过 pointer-events: none 来实现，从而让点击事件能够传递到底层的子元素。
1.3 浏览器渲染差异与事件分发
不同浏览器在处理父元素 :active 且带有覆盖层时的事件分发可能存在细微差异。这意味着在一个浏览器可行的解决方案，在另一浏览器上可能需要微调。因此在跨浏览器场景下，务必验证覆盖层是否对事件传播产生影响。
在实际开发中，优先确保 CSS 设计中没有无意覆盖子元素的伪元素，或以可控的方式让覆盖层位于不可阻塞的区域之外。
2. 实际场景与误解
2.1 常见场景：父容器按下导致子按钮不可点
场景描述：一个卡片状的容器作为触发区域，内部包含一个或多个按钮。当用户按下父容器时，它的 :active 状态会被触发，若父容器的视觉效果涉及覆盖层，则子按钮的点击事件可能被覆盖层拦截。
实际表现常见为：鼠标按下时子按钮出现焦点样式但点击后没有触发子按钮的事件，或者整个区域对点击没有响应。这往往与覆盖层的存在和层级关系有关。
2.2 误解：父元素的 :active 不会影响子元素
部分开发者会认为 父元素的 :active 与子元素点击无关，因为事件的目标通常是具体被点击的子元素。然而，当父元素在 :active 时产生覆盖层，事件的命中区域就可能被改变，从而影响子元素的可点击性。
要点在于：覆盖层会改变事件目标的命中顺序，特别是在鼠标按下阶段，覆盖层可能优先接收事件再传递到子元素，这会导致子元素看起来“失效”。
3. 实操修复方案
3.1 方案一：在伪元素上禁用指针事件
优先级较高的解决办法是让父元素在 :active 状态下创建的覆盖伪元素不拦截点击。给伪元素添加 pointer-events: none，即可保证子元素仍然可以接收点击事件。
通过这种方式，伪元素仅用于视觉反馈，不再阻塞底层的交互目标，从而实现父元素按下时仍能触发子元素的点击。
.parent {position: relative;
}
.parent:active::before {content: "";position: absolute;inset: 0;background: rgba(0,0,0,.15);pointer-events: none; /* 关键：不拦截子元素点击 */
}
3.2 方案二：将 :active 放到子元素上
另一种稳妥的做法是避免让父容器的 :active 直接产生覆盖层，而把按下的视觉反馈放在真正的交互元素上。将 :active 的样式转移到子元素，可以保证点击事件的目标始终是该子元素。
这样做的好处是事件目标明确，事件冒泡和捕获不会被父层干扰，在复杂组件中也更易维护。
.button-wrap { /* 父容器不再处理 :active 的覆盖层 */ }
.button-wrap .child:active {transform: scale(0.98);background: #eee;
}
3.3 方案三：调整 DOM 架构或覆盖层的层级关系
如果需要在父容器层级实现复杂的交互，可以通过调整 DOM 结构来避免覆盖层干扰。把覆盖层放在子元素之上但使用较低的层级，或使用单独的遮罩元素负责视觉反馈而不是直接用伪元素。
同时，确保覆盖层的 z-index 不高于需要交互的子元素，这是避免点击失效的关键点之一。
.parent { position: relative; }
.parent .overlay {position: absolute; inset: 0;background: rgba(0,0,0,.15);z-index: 1;/* 不要让它覆盖到子按钮上方的可点击区域 */
}
.parent .child {position: relative;z-index: 2; /* 确保子元素在覆盖层之上 */
}
3.4 调试与兼容性要点
调试时，使用浏览器开发者工具查看事件目标，尤其关注覆盖层的存在与否、伪元素的命中区域，以及 pointer-events 的配置。
在跨浏览器场景下，较老版本浏览器对 ::before/::after 的点击穿透行为可能存在差异，因此在实现时应进行多浏览器测试并关注渲染差异。
