Getting started with the web front end to the real world: several ways to bind events with HTML tag pseudo elements

Here are a few simple ways to implement click pseudo elements for event handling, with example code attached.

HTML structure

First of all, HTML structure is like this

<section>
    <span>Button text</span>
</section>

Implementation method

The first

adopt
CSS3's
Point events feature.

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;    /* The key here is that the element does not respond to mouse events */
    }

    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;    /* The key here is that the pseudo element overrides the pointer events of the parent element: none, in response to mouse events */
    }

    section span{
        display: inline-block;
        height: 100%;
        vertical-align: top;
        line-height: 40px;
        padding-left: 10px;
    }
</style>

JavaScript code

<script>
    document.querySelector('section').addEventListener('click', ()=>{
        console.log('Only click pseudo element can trigger click');
    });
</script>
web Front end development learning Q-q-u-n:  784783012 ´╝îShare learning methods and small details that need attention, and keep updating the latest tutorials and learning methods
(From zero foundation to front-end project practice course, learning tools, career planning)

Second kinds

By preventing the event from bubbling

The basic code of CSS is the same as the above, and the points events: none; and points events: Auto; are added.

<script>
    document.querySelector('section').addEventListener('click', ()=>{
        // Because other sub element event bubbles are blocked, when clicking section, only the pseudo element coverage area is left to enter event monitoring
        console.log('Only pseudo elements can trigger click');
    });

    document.querySelector('span').addEventListener('click', ev=>{
        // Prevent text elements from bubbling
        ev.stopPropagation();
    });
</script>

Third kinds

adopt
The pointer coordinates of event object are used to judge whether the click is in the range of pseudo elements. There are many ways on the Internet. You can go to Du Niang and have them.

last

Finally, if you can't do it, don't use:: after. Change to the actual dom node

Tags: Web Development Javascript

Posted on Mon, 16 Dec 2019 17:11:07 -0500 by refined