本篇文章给大家带来的内容是关于html标签伪元素绑定事件的三种方式，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
最近项目中遇到点击一个图标执行某些操作的功能，本来很简单就能实现，但图标却是 ::after 伪元素实现的，在印象中好像不能直接对伪元素进行 dom 操作，可项目中有所有页面都是通过伪元素来展示图标的，将所有页面中图标改成 DOM 元素也不太可行。
在网上查了下，大部分都是介绍通过 event 对象获取鼠标指针坐标的方式判断点击的区域是否为伪元素所在的区域，但这很烦麻烦。
下面整理出几种简便方式实现 click 伪元素时进行事件处理，附上例子代码。
HTML结构
首先 HTML 结构是这样的
立即学习“前端免费学习笔记（深入）”；
按钮文字
实现方法
第一种
通过 CSS3 的 pointer-events 特性来实现。
CSS 代码
*{margin: 0; padding:0;} section{ border: 1px solid #abc; border-radius: 5px; background-color: #def; font-family: Microsoft YaHei; height: 40px; box-sizing: border-box; cursor: pointer; font-size: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; /* 关键点在这里，元素禁止响应鼠标事件 */ } section::after{ content: ''; border-left: 1px solid #abc; display: inline-block; width: 24px; height: 100%; background-size: contain; background-position: center; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABEklEQVRoQ+2X3Q3CMAyE3Y3YBDZAbOBRzAaMwkiMgCqlUoX4SX13qiKcl77Uzn13ddpONviaBtdvBbB3gpVAJQA6UI8QaCBcXgnAFoINKgHQQLhcmoC738zsHhHzVbJkAE38uam+qCAkAC/iF+clEHSAD+JlEFSAH+IlEDSATvF0CArARvFUCBggKZ4GAQG4+8HMTuABHxHxyPaAALKbMusKgOlmptd/J9CG+JhxblVz3XWIhz5GFxeTEJSPO9oMbISgiJ8NpAHMzTohaOLpAB0QVPESgC8QdPEygDcQEvFSgBXEmD/14Mutu5x6CnXvSryxAIhmplpVAinbiEWVANHMVKtKIGUbsagSIJqZajV8Ak/MSlox+m54VQAAAABJRU5ErkJggg==); pointer-events: auto; /* 关键点在这里，伪元素覆盖父元素的 pointer-events: none ，响应鼠标事件 */ } section span{ display: inline-block; height: 100%; vertical-align: top; line-height: 40px; padding-left: 10px; }
JavaScript 代码
document.querySelector('section').addEventListener('click', ()=>{ console.log('只有点击伪元素才能触发click'); });
第二种
通过阻止事件冒泡的方式实现
CSS基础代码同上，将 pointer-events: none; 和 pointer-events: auto; 。
document.querySelector('section').addEventListener('click', ()=>{ // 因为其他子元素事件冒泡被阻止了，所以点击section的时候，只剩下伪元素覆盖区域进入到事件监听中 console.log('只有伪元素才能触发click'); }); document.querySelector('span').addEventListener('click', ev=>{ // 阻止文字元素的事件冒泡 ev.stopPropagation(); });
第三种
通过 event 对象的指针坐标来判断点击的是否在伪元素范围内，这种方式网上很多，大家去度娘一下就有了。
最后就是，实在不行就不要使用 ::after 了，换成实际 dom 节点吧，啊O(∩_∩)O哈哈~
本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的HTML视频教程栏目！
以上就是HTML标签伪元素绑定事件的三种方式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1547731.html
微信扫一扫 
支付宝扫一扫 
