CSS adds pseudo elements (before, after) and adds click events to pseudo elements

 The html structure is as follows:

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

1. Cancel the click event of the parent div of the span element

.mask{
	pointer-events: none;
}

2. Add an icon in front of the span element and enable the click event

.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. Add a click event to the span element

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