几种HTML标签伪元素绑定事宜的体式格局

近来项目中碰到点击一个图标实行某些操纵的功用，原本很简单就可以完成，但图标倒是
::after 伪元素完成的，在印象中彷佛不能直接对伪元素举行
dom 操纵，可项目中有一切页面都是经由过程伪元夙来展现图标的，将一切页面中图标改成
DOM 元素也不太可行。

在网上查了下，大部分都是引见经由过程
event 对象猎取鼠标指针坐标的体式格局推断点击的地区是不是为伪元素地点的地区，但这很烦贫苦。

下面整理出几种轻便体式格局完成 click 伪元素时举行事宜处置惩罚，附上例子代码。

HTML构造

起首 HTML 构造是如许的

完成要领

第一种

经由过程
CSS3 的
pointer-events 特征来完成。

CSS 代码

Javascript 代码

第二种

经由过程阻挠事宜冒泡的体式格局完成

CSS基本代码同上，将 pointer-events: none; 和 pointer-events: auto; 。

第三种

经由过程
event 对象的指针坐标来推断点击的是不是在伪元素范围内，这类体式格局网上许多，人人去度娘一下就有了。

末了

末了就是，着实不可就不要运用 ::after 了，换成现实 dom 节点吧，啊O(∩_∩)O哈哈~