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

寒笛过霜天 05-17 116

前言：

此刻大家对“jquery绑定双击”大约比较看重，我们都想要剖析一些“jquery绑定双击”的相关文章。那么小编同时在网络上网罗了一些对于“jquery绑定双击””的相关资讯，希望同学们能喜欢，你们一起来学习一下吧！

伪元素是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;"