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		
});

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐