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

比眉伴天荒 2022-10-12 01:39 221阅读 0赞

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

![20210702202957884.png][]

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

## HTML结构 ##

首先 HTML 结构是这样的

<table> 
 <tbody> 
 <tr> 
 <td> <code>&lt;section&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;span&gt;按钮文字&lt;</code><code>/span</code><code>&gt;</code> <code>&lt;</code><code>/section</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

## 实现方法 ##

### 第一种 ###

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

CSS 代码

<table> 
 <tbody> 
 <tr> 
 <td> <code>&lt;style&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>*{margin: 0; padding:0;}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>section{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border: 1px solid </code><code>#abc;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border-radius: 5px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-color: </code><code>#def;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>font-family: Microsoft YaHei;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height: 40px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>box-sizing: border-box;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>cursor: pointer;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>font-size: 16px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>position: absolute;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>top</code><code>: 50%;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>left: 50%;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>transform: translate(-50%, -50%);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>pointer-events: none;&nbsp;&nbsp;&nbsp; /* 关键点在这里，元素禁止响应鼠标事件 */</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>section::after{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>content: </code><code>''</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border-left: 1px solid </code><code>#abc;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>display: inline-block;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width: 24px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height: 100%;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-size: contain;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-position: center;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-image: url(data:image</code><code>/png</code><code>;base64,</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>pointer-events: auto;&nbsp;&nbsp;&nbsp; /* 关键点在这里，伪元素覆盖父元素的 pointer-events: none ，响应鼠标事件 */</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>section span{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>display: inline-block;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height: 100%;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>vertical-align: </code><code>top</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>line-height: 40px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>padding-left: 10px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&lt;</code><code>/style</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

JavaScript 代码

### 第二种 ###

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

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

<table> 
 <tbody> 
 <tr> 
 <td> <code>&lt;script&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.querySelector(</code><code>'section'</code><code>).addEventListener(</code><code>'click'</code><code>, ()=&gt;{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//</code> <code>因为其他子元素事件冒泡被阻止了，所以点击section的时候，只剩下伪元素覆盖区域进入到事件监听中</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'只有伪元素才能触发click'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.querySelector(</code><code>'span'</code><code>).addEventListener(</code><code>'click'</code><code>, ev=&gt;{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//</code> <code>阻止文字元素的事件冒泡</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ev.stopPropagation();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&lt;</code><code>/script</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

### 第三种 ###

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

## ** ** ##

## **最后** ##

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

喜欢我的文章就关注我吧，持续更新中.....  
以上内容希望帮助到大家，很多朋友在进阶的时候总会遇到一些问题和瓶颈，业务代码写多了没有方向感，不知道该从那里入手去提升，对此我整理了一些资料，多个知识点高级进阶干货需要的可以免费分享给大家，需要的可以去主页或者评论留言[点击进入暗号：csdn][csdn]

[20210702202957884.png]: /images/20221005/e298689aa44d46068db4b18afc52ea5e.png
[csdn]: https://jq.qq.com/?_wv=1027&k=nKNuXAFr