HTML標(biāo)簽偽元素綁定事件的方式有哪些

這篇文章給大家分享的是有關(guān)HTML標(biāo)簽偽元素綁定事件的方式有哪些的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

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

下面整理出幾種簡便方式實(shí)現(xiàn) click 偽元素時(shí)進(jìn)行事件處理，附上例子代碼。

HTML結(jié)構(gòu)

首先 HTML 結(jié)構(gòu)是這樣的

<section>
    <span>按鈕文字</span>
</section>

實(shí)現(xiàn)方法

第一種

通過 CSS3 的 pointer-events 特性來實(shí)現(xiàn)。

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;    /* 關(guān)鍵點(diǎn)在這里，元素禁止響應(yīng)鼠標(biāo)事件 */
    }

    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;    /* 關(guān)鍵點(diǎn)在這里，偽元素覆蓋父元素的 pointer-events: none ，響應(yīng)鼠標(biāo)事件 */
    }

    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('只有點(diǎn)擊偽元素才能觸發(fā)click');
    });
</script>

第二種

通過阻止事件冒泡的方式實(shí)現(xiàn)

CSS基礎(chǔ)代碼同上，將 pointer-events: none; 和 pointer-events: auto; 。

<script>
    document.querySelector('section').addEventListener('click', ()=>{
        // 因?yàn)槠渌釉厥录芭荼蛔柚沽?，所以點(diǎn)擊section的時(shí)候，只剩下偽元素覆蓋區(qū)域進(jìn)入到事件監(jiān)聽中
        console.log('只有偽元素才能觸發(fā)click');
    });

    document.querySelector('span').addEventListener('click', ev=>{
        // 阻止文字元素的事件冒泡
        ev.stopPropagation();
    });
</script>

第三種

通過 event 對象的指針坐標(biāo)來判斷點(diǎn)擊的是否在偽元素范圍內(nèi)，這種方式網(wǎng)上很多，大家去度娘一下就有了。

感謝各位的閱讀！關(guān)于HTML標(biāo)簽偽元素綁定事件的方式有哪些就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！