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







本文转载自中文网