应统一设置伪元素 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，但完全规避伪元素带来的事件捕获不确定性