伪元素默认拦截点击事件，必须显式设置 pointer-events: none 才能透传事件；常见错误包括遗漏该声明、用 opacity/visibility 隐藏仍拦截、层叠上下文导致 z-index 失效，安卓 webview 兼容性差需真机测试。
伪元素默认吃掉点击事件
伪元素（::before 和 ::after）只要渲染出来，就默认参与事件捕获——哪怕只是画个 1px 边框、半透明遮罩或波浪装饰，也会拦截 click、touchstart 等事件。这不是 bug，是规范行为：它们是真实参与层叠和命中测试的“元素”，不是视觉附属品。
常见错误包括：
- 只给父元素设
position: relative和z-index，却漏掉伪元素本身的pointer-events - 用
opacity: 0或visibility: hidden隐藏伪元素，但它们仍占位、仍拦截事件 - 在轮播、卡片或 Modal 内部加伪元素边框/阴影，结果父级
overflow: hidden把它裁掉，审查工具里看不见，但盒模型仍存在
必须显式设 pointer-events: none 到伪元素本身
这是最直接有效的解法，但必须加在伪元素规则里，不是父元素上。否则事件照常被拦截，按钮点不动、链接打不开、input[type="file"] 点击失效都是典型表现。
正确写法示例：
.btn {
position: relative;
}
.btn::after {
content: "";
position: absolute;
top: -10px; left: -10px; right: -10px; bottom: -10px;
background: linear-gradient(90deg, #ff3366, transparent);
pointer-events: none; /* ✅ 关键行，必须在这 */
}
注意：
- 不要写
pointer-events: visible或fill——普通 HTML 元素和伪元素只认auto和none - 如果伪元素里嵌了可交互子内容（比如关闭按钮），得单独给那个子元素加
pointer-events: auto - 安卓 WebView（尤其华为、小米旧版）对
pointer-events: none的支持不稳定，真机必测
尺寸和定位也会影响是否遮挡
伪元素覆盖范围比目标元素大，是点击失效的高频原因。比如 top: -10px; bottom: -10px 拉出额外空间，本意是扩大视觉反馈，结果把边缘点击区域全盖住了。
安全做法：
- 优先用
inset: 0替代top/left/right/bottom: 0，语义更清晰 - 若需扩大点击热区，用
::after拉出区域，但务必同步加pointer-events: none - 检查父容器是否用了
transform、filter或will-change——这些会创建新层叠上下文，让z-index失效，导致你以为“没盖住”，其实层级已错乱 - 用 Chrome DevTools 的 Layers 面板或勾选 “Show layer borders” 直观确认渲染层顺序
移动端和 WebView 的兼容性陷阱
iOS Safari 对 pointer-events 支持较稳，但安卓 WebView（尤其 Android 10 及以下）存在已知问题：设了 none 却仍触发 click，或对 position: sticky 元素完全不生效。
当纯 CSS 不够时，得配合 JS：
- 对
input[type="file"]或select被遮挡的场景，临时移除伪元素或切换其display - 模态框遮罩层需响应空白点击关闭时，别依赖
pointer-events: none+ 底层监听，改用pointer-events: auto+event.target === overlay判断 - 动画中避免用
transition动pointer-events——它不支持过渡，会导致中间帧意外阻断事件
真正容易被忽略的是：多个绝对定位伪元素堆叠时，事件穿透顺序不按 DOM 顺序，而是按层叠上下文内的绘制顺序。这时候靠调 z-index 往往无效，得用 pointer-events: none 逐层确认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
