下面整理出幾種簡便方式實作click僞元素時進行事件處理，附上例子代碼。
HTML結構
首先HTML結構是這樣的
按鈕文字
實作方法
第一種
通過CSS3的pointer-events特性來實作。
CSS代碼
*{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;
}
sectionspan{
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哈哈~
本文轉載自中文網