在很多的时候通常需要伪元素来修饰一个html节点，比如说上传图片需要一个删除按钮。那么这个伪元素就需要一个删除按钮,那么伪元素如何来获取点击事件呢？其原理都是通过屏蔽的其寄生元素的操作事件，仅在鼠标点击伪元素的时候事件可操作。
具体实现方式有两种:
一种是： 元素本身：pointer-events: none;禁用点击事件, 其伪元素通过pointer-events: auto;启用点击事件，使鼠标只能点击到伪元素
第二种是：通过子元素的事件冒泡原理，在子元素事件处理结束后return false，告知父元素事件处理完毕。这样只就屏蔽了父元素接收事件，然后:after伪元素是悬浮在子元素上面的，故点击伪元素的时候触发父元素事件
第一种实现方式只能是绑定一个事件，如点击图片实现查看，点击伪元素实现删除则不可以实现。而且会导致:hover等鼠标事件失效，所以不推荐使用
第二种实现方式可以绑定一个事件，如点击图片实现在子元素事件中实现查看，点击伪元素在父元素事件中实现删除。
下面是两种事件实现方式的案例，复制粘贴即可运行
<!DOCTYPE html>
<html>
<head>
<title>js伪元素点击事件实现的两种方法</title>
<style type="text/css">
.solv-1, .solv-2 {
width: 40%;
float: left;
margin: 22px;
}
.item-1, .item-2 {
width: 50px;
height: 50px;
border-radius: 5px;
background: #fafafa;
position: relative;
}
.item-1::before, .item-2::before {
content: 'x';
display: inline-block;
width: 20px;
height: 20px;
border-radius: 20px;
border: solid 2px #fff;
background: #FF0000;
line-height: 18px;
text-align: center;
color: #fff;
transform: scale(0.5, 0.5);
position: absolute;
right: -10px;
top: -10px;
cursor: pointer;
}
.item-1 {
pointer-events: none;
}
.item-1::before {
pointer-events: auto;
}
.item-2 img {
border-radius: 5px;
}
</style>
</head>
<body>
<div class="solv-1">
<p>
一种是：元素本身：pointer-events: none;禁用点击事件
其伪元素通过pointer-events: auto;启用点击事件，使鼠标只能点击到伪元素
</p>
<p>
这种实现方式只能是绑定一个事件，如点击图片实现查看，点击伪元素实现删除则不可以实现。而且会导致:hover等鼠标事件失效，所以不推荐使用
</p>
<div class="item-1" onclick="del1()"></div>
</div>
<div class="solv-2">
<p>
第二种是：通过子元素的事件冒泡原理，在子元素事件处理结束后return false，告知父元素事件处理完毕。这样只就屏蔽了父元素接收事件，然后:after伪元素是悬浮在子元素上面的，故点击伪元素的时候触发父元素事件。
</p>
<div class="item-2" onclick="del2()">
<img id="avatar" src="https://avatar.csdn.net/5/1/F/3_a486259.jpg" width="50" height="50" alt="" />
</div>
</div>
<script type="text/javascript">
function del1 () {
alert('点击到了删除事件')
}
var avatarEl = document.getElementById('avatar')
avatarEl.onclick = function selImg (e) {
e.stopPropagation()
alert('选中了图片')
return false
}
function del2 () {
alert('点击到了删除事件2')
}
</script>
</body>
</html>
