几种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哈哈~