HTML標(biāo)簽偽元素綁定事件的三種方式

1、html標(biāo)簽偽元素綁定事件的三種方式下面收拾出幾種簡便方式實現(xiàn)click偽元素時舉行大事處理，附上例子代碼。html結(jié)構(gòu)首先html結(jié)構(gòu)是這樣的按鈕文字實現(xiàn)辦法第一種通過css3的pointer-events特性來實現(xiàn)。css代碼*margin:0;padding:0;sectionborder:1pxsolidabc;border-radius:5px;background-color:def;font-family:microsoftyahei;height:40px;box-sizing:border-box;cursor:pointer;font-size:16px;position:

2、absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;/*關(guān)鍵點在這里，元素禁止響應(yīng)鼠標(biāo)大事*/section:aftercontent:&39;&39;border-left:1pxsolidabc;display:inline-block;width:24px;height:100%;background-size:contain;background-position:center;background-image:url(data:image/png;base64,ivb

3、orw0kggoaaaansuheugaaadaaaaawcayaaabxavmhaaabekleqvroq+2x3q3cmaye3y3ybdzabobrzaamwkimgcqluox4sx13qikcl77uzn13ddponviabtdvbbb3gpvajqa6ui8qacbcxgnafoinkghqqlhcmoc738zshhhzvbjkae38uam+qcakac/if+clehsad+jlefsah+iledsatvf0cararvfucbggkz4gaqg4+8hmtuabhxhxypaaalkbmuskgolmptd/j9cg+jhxblvz3xwihz5gfxetejspo9o

4、mbisgij8npahmztohaolpab0qvpesgc8qdpeygdcqevfsgbxemd/14mutu5x6cnxvsryxaihmplpvainbiewvanhmvktkigubsagsijqzajv8ak/mslox+m54vqaaaabjru5erkjggg=);pointer-events:auto;/*關(guān)鍵點在這里，偽元素籠罩父元素的pointer-events:none，響應(yīng)鼠標(biāo)大事*/sectionspandisplay:inline-block;height:100%;vertical-align:top;line-height:40px;padding-left

5、:10px;javascript代碼document.queryselector(&39;section&39;).addeventlistener(&39;click&39;,()=>console.log(&39;惟獨點擊偽元素才干觸發(fā)click&39;););其次種通過阻擋大事冒泡的方式實現(xiàn)css基礎(chǔ)代碼同上，將pointer-events:none;和pointer-events:auto;。document.queryselector(&39;section&39;).addeventlistener(&39;click&39;,()=>/由于其他子元素大事冒泡被阻擋了，所以點擊section的時候，只剩下偽元素籠罩區(qū)域進入到大事監(jiān)聽中console.log(&39;惟獨偽元素才干觸發(fā)click&39;););document.queryselector(&39;span&39;).addeventlistener(&39;click&39;,ev=>/阻擋文字元素的大事冒泡ev.stoppropagation(););第三種通過event對象的指針坐標(biāo)來推斷點擊的是否在偽元素范圍內(nèi)，這種方式網(wǎng)上