HTML標籤偽元素綁定事件的三種方式

這篇文章帶給大家的內容是關於HTML標籤偽元素綁定事件的三種方式，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

最近專案中遇到點選圖示執行某些操作的功能，本來很簡單就能實現，但圖示卻是 ::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: &#39;&#39;;
        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(&#39;section&#39;).addEventListener(&#39;click&#39;, ()=>{
        console.log(&#39;只有点击伪元素才能触发click&#39;);
    });
</script>

第二種

透過阻止事件冒泡的方式實作

CSS基礎程式碼同上，將 pointer-events: none; 和 pointer-events: auto; 。

<script>
    document.querySelector(&#39;section&#39;).addEventListener(&#39;click&#39;, ()=>{
        // 因为其他子元素事件冒泡被阻止了，所以点击section的时候，只剩下伪元素覆盖区域进入到事件监听中
        console.log(&#39;只有伪元素才能触发click&#39;);
    });

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

第三種

透過 event 物件的指標座標來判斷點擊的是否在偽元素範圍內，這種方式網路上很多，大家去度娘一下就有了。

最後就是，實在不行就不要使用 ::after 了，換成實際 dom 節點吧，啊O(∩_∩)O哈哈~

這篇文章到這裡就已經全部結束了，更多其他精彩內容可以關注PHP中文網的HTML影片教學專欄！

以上是HTML標籤偽元素綁定事件的三種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！