最近項目中遇到點擊一個圖標執行某些操作的功能，本來很簡單就能實現，但圖標卻是 ::after 偽元素實現的，在印象中好像不能直接對偽元素進行 dom 操作，可項目中有所有頁面都是通過偽元素來展示圖標的，將所有頁面中圖標改成 DOM 元素也不太可行。
在網上查了下，大部分都是介紹通過 event 對象獲取鼠標指針坐標的方式判斷點擊的區域是否為偽元素所在的區域，但這很煩麻煩。

下面整理出幾種簡便方式實現 click 偽元素時進行事件處理，附上例子代碼。

HTML結構

首先 HTML 結構是這樣的

 section  span 按鈕文字 /span  /section 

實現方法

第一種

通過 CSS3 的 pointer-events 特性來實現。

CSS 代碼

 style  *{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; /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哈哈~

本篇文章到這里就已經全部結束了，更多其他精彩內容可以關注PHP 的HTML視頻教程欄目！

以上就是HTML標簽偽元素綁定事件的三種方式的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。