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

oliverhuang 发布于2019-08-30 15:43 / 2010人阅读

摘要：下面整理出几种简便方式实现伪元素时进行事件处理，附上例子代码。代码关键点在这里，元素禁止响应鼠标事件关键点在这里，伪元素覆盖父元素的，响应鼠标事件代码只有点击伪元素才能触发第二种通过阻止事件冒泡的方式实现基础代码同上，将和。

最近项目中遇到点击一个图标执行某些操作的功能，本来很简单就能实现，但图标却是 ::after 伪元素实现的，在印象中好像不能直接对伪元素进行 dom 操作，可项目中有所有页面都是通过伪元素来展示图标的，将所有页面中图标改成 DOM 元素也不太可行。
在网上查了下，大部分都是介绍通过 event 对象获取鼠标指针坐标的方式判断点击的区域是否为伪元素所在的区域，但这很烦麻烦。

下面整理出几种简便方式实现 click 伪元素时进行事件处理，附上例子代码。

HTML结构

首先 HTML 结构是这样的


    按钮文字

实现方法 第一种

通过 CSS3 的 pointer-events 特性来实现。

CSS 代码

JavaScript 代码

第二种

通过阻止事件冒泡的方式实现

CSS基础代码同上，将 pointer-events: none; 和 pointer-events: auto; 。

第三种

通过 event 对象的指针坐标来判断点击的是否在伪元素范围内，这种方式网上很多，大家去度娘一下就有了。

最后

最后就是，实在不行就不要使用 ::after 了，换成实际 dom 节点吧，啊O(∩_∩)O哈哈~

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116033.html

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

摘要：下面整理出几种简便方式实现伪元素时进行事件处理，附上例子代码。代码关键点在这里，元素禁止响应鼠标事件关键点在这里，伪元素覆盖父元素的，响应鼠标事件代码只有点击伪元素才能触发第二种通过阻止事件冒泡的方式实现基础代码同上，将和。最近项目中遇到点击一个图标执行某些操作的功能，本来很简单就能实现，但图标却是 ::after 伪元素实现的，在印象中好像不能直接对伪元素进行 dom 操作，可项目...

BakerJ 2019-08-02 16:09 评论0 收藏0
几种HTML标签伪元素绑定事件的方式

摘要：下面整理出几种简便方式实现伪元素时进行事件处理，附上例子代码。代码关键点在这里，元素禁止响应鼠标事件关键点在这里，伪元素覆盖父元素的，响应鼠标事件代码只有点击伪元素才能触发第二种通过阻止事件冒泡的方式实现基础代码同上，将和。最近项目中遇到点击一个图标执行某些操作的功能，本来很简单就能实现，但图标却是 ::after 伪元素实现的，在印象中好像不能直接对伪元素进行 dom 操作，可项目...

Airmusic 2019-08-23 16:32 评论0 收藏0
面试知识点总结

摘要：最近面试几家前端职位，想知道目前的前端面试题是偏向哪一块，都主要问到的是语法，闭包，原型链，继承那一块。并且将面试题的知识点汇总一下。参考网站面试题图片过多的时候如何优化图标很多的时候可以用雪碧图图片过大时候可以压缩一下。最近面试几家前端职位，想知道目前的前端面试题是偏向哪一块，都主要问到的是ES6语法，闭包，原型链，继承那一块。并且将面试题的知识点汇总一下。有助于下次面试。 1.H...

王晗 2019-08-30 14:15 评论0 收藏0
面试知识点总结

摘要：最近面试几家前端职位，想知道目前的前端面试题是偏向哪一块，都主要问到的是语法，闭包，原型链，继承那一块。并且将面试题的知识点汇总一下。参考网站面试题图片过多的时候如何优化图标很多的时候可以用雪碧图图片过大时候可以压缩一下。最近面试几家前端职位，想知道目前的前端面试题是偏向哪一块，都主要问到的是ES6语法，闭包，原型链，继承那一块。并且将面试题的知识点汇总一下。有助于下次面试。 1.H...

CrazyCodes 2019-08-22 15:46 评论0 收藏0