html 伪元素放入标签,web前端入门到实战：几种HTML标签伪元素绑定事件的方式

web前端入门到实战：几种HTML标签伪元素绑定事件的方式

发布时间：2020-04-18 15:22:05

来源：51CTO

阅读：196

作者：前端向南

下面整理出几种简便方式实现 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');

});

web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法

(从零基础开始到前端项目实战教程，学习工具，职业规划)

第二种

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

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 节点吧