最近项目中遇到点击一个图标执行某些操作的功能，本来很简单就能实现，但图标却是::after伪元素实现的，在印象中好像不能直接对伪元素进行dom操作，可项目中有所有页面都是通过伪元素来展示图标的，将所有页面中图标改成DOM元素也不太可行。

 

　　在网上查了下，大部分都是介绍通过event对象获取鼠标指针坐标的方式判断点击的区域是否为伪元素所在的区域，但这很烦麻烦。

 

　　3425417128-5c9e2b01f313c_articlex.png

 

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

 

　　HTML结构

 

　　首先HTML结构是这样的

 

　　<section>

 

　　<span>按钮文字</span>

 

　　</section>

 

　　实现方法

 

　　第一种

 

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

 

　　CSS代码

 

　　

 

　　

 

　　<style>

 

　　*{margin:0;padding:0;}

 

　　section{

 

　　border:1pxsolid#abc;

 

　　border-radius:5px;

 

　　background-color:#def;

 

　　font-family:MicrosoftYaHei;

 

　　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:1pxsolid#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，响应鼠标事件*/

 

　　}

 

　　sectionspan{

 

　　display:inline-block;

 

　　height:100%;

 

　　vertical-align:top;

 

　　line-height:40px;

 

　　padding-left:10px;

 

　　}

 

　　</style>

 

　　JavaScript代码

 

　　<script>

 

　　document.querySelector('section').addEventListener('click',()=>{

 

　　console.log('只有点击伪元素才能触发click');

 

　　});

 

　　</script>

 

　　第二种

 

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

 

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

 

　　<script>

 

　　document.querySelector('section').addEventListener('click',()=>{

 

　　//因为其他子元素事件冒泡被阻止了，所以点击section的时候，只剩下伪元素覆盖区域进入到事件监听中

 

　　console.log('只有伪元素才能触发click');

 

　　});

 

　　document.querySelector('span').addEventListener('click',ev=>{

 

　　//阻止文字元素的事件冒泡

 

　　ev.stopPropagation();

 

　　});

 

　　</script>

 

　　第三种

 

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

 

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