css添加伪元素(before、after)并为伪元素添加点击事件

 html结构如下:

<div class="mask">
<span class="item"><span>
<div>

1.取消span元素父类div的点击事件

.mask{
	pointer-events: none;
}

2.为span元素前边添加图标并开启点击事件

.item::before {
	content: '';
	display: inline-block;
	background: url(../../images/img.png) no-repeat;
	width: 14px;
	height: 14px;
	margin-right: 3px;
	background-size: cover;
	vertical-align: middle;
	/*给伪元素开启鼠标事件，将事件冒泡到父元素的点击事件中*/
	pointer-events: auto;
}

3.为span元素添加点击事件

$('.mask').click(function(e){
	//do something		
});