当前位置: 首页 > Web前端 > CSS

几种HTML标签伪元素绑定事件的方式

时间:2023-03-30 16:43:43 CSS

HTML标签伪元素绑定事件的几种方式貌似不能直接对伪元素进行dom操作,但是项目中的所有页面都是通过伪元素显示图标,换图标也不可行在所有页面上转换为DOM元素。在网上查了一下,介绍的大多是通过事件对象获取鼠标指针坐标的方法来判断点击的区域是否为伪元素所在的区域,但是这样很麻烦。下面整理几种实现点击伪元素事件处理的便捷方式,并附上示例代码。HTML结构首先,HTML结构是这样的

Buttontext
第一种实现方式是通过CSS3的pointer-events特性实现的。CSS代码JavaScriptcodeThesecondwaytopreventeventbubblingistoimplementthesameCSSbasiccodeasabove,andsetpointer-events:none;andpointer-events:auto;第三种方式是利用指针坐标事件对象的判断点击是否在伪元素范围内。最后就是,不行的话就不要用::after了,换成真正的dom节点,啊O(∩_∩)O哈哈~