应统一设置伪元素 pointer-events: none，避免多层 ::after 堆叠干扰事件目标；用 content: "" 和绝对定位创建透明热区，禁用视觉样式；必要时通过 e.target.closest() 回溯宿主元素，或改用 padding/包装元素等 dom 级方案。
直接用伪元素扩展点击区域时，如果多层 ::after 堆叠且未控制层叠关系或尺寸范围，e.target 就可能指向最上层的伪元素本身（比如某个父容器的 ::after），而不是你真正想响应的目标元素。这不是事件“穿透”，而是事件被“抢走”了。
确保伪元素不干扰目标捕获
伪元素默认是宿主元素的视觉子级，但它们不是真实 DOM 节点，无法被 e.target 正确映射为业务逻辑中的目标对象。关键在于：让伪元素只起“触发代理”作用，不遮挡、不冒泡干扰、也不被误认为独立目标。
- 给所有用于扩展点击区的伪元素统一设置
pointer-events: none，这样点击会直接穿透到其宿主元素 ——e.target就自然落在你期望的 DOM 元素上 - 避免在父容器上也定义同名伪元素（如同时给
.item和它的.item-wrapper都设::after），否则点击区域重叠时，浏览器按渲染顺序决定谁“接收”事件，容易错位 - 若必须多层伪元素（比如边框+阴影+遮罩），用
z-index明确分层，并确保只有最贴近目标内容的那一层参与交互逻辑；其余层加pointer-events: none
用 content 属性做轻量占位，而非视觉覆盖
很多开发者习惯用 ::after 绘制大块背景或边框来“撑开”点击区，但这容易导致伪元素尺寸失控、覆盖邻近元素。更稳妥的方式是仅用它生成一个透明、极小、精准定位的“热区”：
- 设置
content: ""，不添加文字或图标 - 用
position: absolute+ 四个方向偏移（top/right/bottom/left）精确包裹外边距区域，宽度/高度由 margin 值推算，不依赖父容器尺寸 - 禁用所有视觉样式（如
background、border、box-shadow），除非必要；哪怕需要视觉反馈，也建议改用宿主元素的:hover或 class 切换
监听时主动回溯宿主元素
即使做了上述控制，复杂布局中仍可能出现 e.target 是伪元素对应的真实 DOM 元素（比如某层 ::after 的宿主是 div，但你实际要的是它内部的 button）。这时可在事件处理中主动判断：
- 检查
e.target是否为伪元素的宿主（即是否带有你用于扩展点击区的 class，如.click-extend） - 若不是，用
e.target.closest(".click-extend")向上查找最近的合法目标 - 避免使用
e.composedPath()或深度遍历，性能开销大且不可靠
替代方案：用 padding 模拟 margin + pointer-events
当嵌套伪元素难以收敛时，可考虑绕过伪元素，改用更可控的 DOM 级方案：
- 保留视觉上的“外边距感”：用
padding替代margin，再配合background-clip: content-box让背景不侵入 padding 区 - 或者在外层包一层
span或div，设display: inline-block+margin，把点击绑定到这个 wrapper 上 - 这类方式虽增加少量 HTML，但完全规避伪元素带来的事件捕获不确定性
