伪元素不是DOM节点，无法绑定事件监听器；其内容由CSS渲染生成，不参与DOM树和事件系统，只能通过宿主元素配合坐标判断实现交互。
伪元素不是 DOM 节点，addEventListener 绑不上
因为 ::before 和 ::after 是 CSS 渲染时动态生成的视觉层内容，不写入 DOM 树——它没有节点引用、不能被 document.querySelector() 选中，调用 getComputedStyle(el, '::before') 只能读样式，无法 attach 事件监听器。
常见错误包括：
-
document.querySelector('.btn::before').addEventListener('click', ...)—— 语法报错，选择器无效 -
el.addEventListener('click', ...)写在伪元素上 —— HTML 不解析伪元素，JS 根本看不到它 - 在 DevTools 里用
elementFromPoint()查点击位置，返回值永远是宿主元素，不会是::before
pointer-events: auto 在伪元素上等于没写
伪元素默认 pointer-events: auto，但这不改变“不可被事件系统识别”这一事实。浏览器压根不把它纳入事件捕获路径，所以悬停显示 cursor: pointer ≠ 点击能触发回调。
真正起作用的是宿主元素是否可交互，以及伪元素是否遮挡了它：
立即学习“Java免费学习笔记（深入）”；
- 如果伪元素
z-index较高且没设pointer-events: none，它会吃掉点击，宿主收不到事件 - 如果伪元素设了
pointer-events: none，点击就透传给宿主（或更下层元素） -
pointer-events: auto在伪元素上无实际效果，别白费力气写
想让“视觉上的伪元素区域”响应点击，得靠宿主 + 坐标判断
典型场景：关闭按钮用 ::after 画 ×，但点击 × 才触发关闭，点文字区域则不触发。这时不能靠伪元素自己响应，而是：
- 把
click监听器绑在宿主元素上 - 宿主设
pointer-events: none，伪元素设pointer-events: auto（仅 Chrome/Firefox 支持，Safari 部分版本有 bug） - 用
e.offsetX/e.offsetY或getBoundingClientRect()判断点击是否落在伪元素视觉区域内 - 注意：IE11 完全不支持伪元素上的
pointer-events，必须降级为纯坐标计算或改用真实 DOM 元素
伪元素遮挡点击时，pointer-events: none 是最简解法
当 ::before 作为背景装饰层覆盖整个容器，导致内部按钮点不了，问题不在“伪元素没事件”，而在它挡住了底层元素。
直接加一行即可修复：
.card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(...);
pointer-events: none; /* 关键 */
}但要注意：
- 这个声明必须写在伪元素自己的 CSS 规则里，父元素上设无效
- 移动端 Safari 对
pointer-events: none在伪元素上的支持较晚，iOS 14.5+ 才稳定 - 如果伪元素里有
content: "×"这类文本，设none后它依然可见，只是不拦截事件
复杂点在于：你永远不是在“给伪元素加事件”，而是在“绕过它、利用它、或拿它当坐标尺”。一旦开始写 querySelector('::after') 或期待 onclick 生效，就已经走偏了。
