伪元素无法绑定javascript事件，因其非dom节点，不进入dom树，queryselector调用会报错，addeventlistener无效；所谓点击实为宿主元素响应，需通过pointer-events: none透传或坐标判断实现交互。
因为 ::before 和 ::after 根本不是 DOM 节点，浏览器连它们“存在”都不承认，addEventListener 绑定在它身上毫无意义。
document.querySelector('::after') 会直接报错
伪元素只存在于 CSS 渲染层，不进入 DOM 树。DevTools 的 Elements 面板里搜不到，document.querySelectorAll('*') 也遍历不到。执行 document.querySelector('.btn::after') 不是返回 null，而是语法错误——选择器本身无效。
-
querySelector和getElementById等 API 只操作真实 DOM 节点 - 伪元素没有
nodeType、没有parentNode、不能被appendChild或remove - 所谓“点击 × 图标”，真正触发事件的永远是它的宿主元素（比如
.close-btn）
pointer-events: auto 在伪元素上等于没写
很多人写 ::after { content: "×"; pointer-events: auto; }，发现悬停有 cursor 但点击无反应。这不是属性失效，而是伪元素默认就是 auto，但它依然不参与事件捕获路径——浏览器压根不会把它列为 event.target。
-
elementFromPoint()查不到伪元素，getEventListeners()也看不到它身上挂了什么 - 设
pointer-events: none是为了让事件穿透到宿主，不是为了让伪元素“变可点” - 若父容器设了
pointer-events: none，子元素再设auto也无效——事件检测自顶向下，父级一关，整棵子树静音
移动端 iOS Safari 的 :active 为什么完全不生效
iOS Safari 不支持伪元素上的 :active 或 :hover 状态切换，因为触摸设备不匹配 @media (hover: hover)。用户点了那个视觉区域，但宿主收不到 touchstart，除非你主动监听并手动加类。
- 不要依赖
::after:hover做点击反馈，它在真机上基本不可靠 - 正确做法是监听宿主的
touchstart，计算e.offsetX / e.offsetY是否落在伪元素绘制区域内 - 伪元素的
top/left/width/height必须精确，否则坐标判断失准
真正要解决的，从来不是“怎么给伪元素加 click”，而是“怎么让点击行为准确对应到它所代表的视觉意图”。这需要你放弃对伪元素的 DOM 幻觉，转而用坐标、盒模型和事件透传来建模交互逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
