Three ways to bind events to HTML tag pseudo-elements

This article brings you three ways to bind events to HTML tag pseudo-elements. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In a recent project, I encountered the function of clicking an icon to perform certain operations. It was originally very simple to implement, but the icon is implemented by ::after pseudo-element. In my impression, it seems that the pseudo-element cannot be directly performed. DOM operation, but all pages in the project display icons through pseudo elements, and it is not feasible to change the icons in all pages into DOM elements.
After checking on the Internet, most of them introduce the method of obtaining the mouse pointer coordinates through the event object to determine whether the clicked area is the area where the pseudo element is located, but this is very troublesome.

The following is a summary of several simple ways to implement event processing when clicking pseudo elements, with sample code attached.

HTML structure

First of all, the HTML structure is like this

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

Implementation method

The first one

Through CSS3 pointer-events characteristics to achieve.

CSS code

<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 code

<script>
    document.querySelector(&#39;section&#39;).addEventListener(&#39;click&#39;, ()=>{
        console.log(&#39;只有点击伪元素才能触发click&#39;);
    });
</script>

The second type

realizes by preventing event bubbling

CSS basic code Same as above, change pointer-events: none; and 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>

The third method

Use the pointer coordinates of the event object to determine whether the click is within the range of the pseudo element. There are many ways to do this on the Internet. You can find it by going to Du Niang.

The last thing is, if it doesn’t work, don’t use ::after, replace it with the actual dom node, ah O(∩_∩)O haha~

This article is all here It’s over, for more other exciting content, you can pay attention to the HTML video tutorial column on the PHP Chinese website!

The above is the detailed content of Three ways to bind events to HTML tag pseudo-elements. For more information, please follow other related articles on the PHP Chinese website!