如何在伪元素上添加点击事件?

如何在伪元素上添加点击事件?

伪元素是CSS中的一种特殊选择器, 用于在元素的特定位置插入内容, 它们被称为“伪元素”, 是因为它们不是实际存在于HTML DOM文档中的元素, 而是通过CSS来创建的， 那伪元素如何添加点击元素？

在页面上我们无法通过jQuery获取到元素中的伪元素进行事件绑定，所以我们利用pointer-events属性屏蔽元素操作事件, 将事件绑定到伪元素上。例：

html：

<div>盒子的内容</div>

css：

div{
		pointer-events: none;
}
div:after{
		pointer-events:auto;
}

js：

$('div').on('click', function () {
console.log(this) //该事件实际绑定元素是after伪元素
})

解决伪元素盖住点击事件

在伪元素代码中加上这句，可穿透伪元素点击

pointer-events:none;

伪元素的点击事件

1.父元素 使用 "pointer-events: none;" 伪元素使用"pointer-events: auto;"