Trois façons de lier des événements aux pseudo-éléments de balises HTML

Cet article vous propose trois façons de lier des événements aux pseudo-éléments de balises HTML. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Dans un projet récent, j'ai rencontré la fonction de cliquer sur une icône pour effectuer certaines opérations. Cela devrait être très simple à implémenter, mais l'icône est implémentée par ::after pseudo-élément. Il semble que le pseudo-élément ne puisse pas être effectué directement dans le DOM, mais toutes les pages du projet affichent des icônes via des pseudo-éléments, et il n'est pas possible de changer les icônes de toutes les pages en éléments DOM.
Après vérification sur Internet, la plupart d'entre eux introduisent la méthode d'obtention des coordonnées du pointeur de la souris via l'objet événement pour déterminer si la zone cliquée est la zone où se trouve le pseudo-élément, mais cela est très gênant.

Ce qui suit est un résumé de plusieurs façons simples de gérer le traitement des événements lorsque vous cliquez sur des pseudo-éléments, avec un exemple de code joint.

Structure HTML

Tout d'abord, la structure HTML est comme ceci

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

Méthode de mise en œuvre

La première méthode

Grâce au pointeur de la fonctionnalité CSS3 -events à réaliser.

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

Code JavaScript

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

Le deuxième type

est obtenu en empêchant le bouillonnement d'événements

Le Le code CSS de base est le même que ci-dessus, sauf pointer-events: none;

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

La troisième méthode

Utilise les coordonnées du pointeur de l'objet événement pour déterminer si le clic se situe dans la plage du pseudo-élément. Il existe de nombreuses façons de le faire sur Internet. pouvez le trouver en allant à Du Niang.

La dernière chose est que si ça ne marche pas, n'utilisez pas ::after, remplacez-le par le nœud dom actuel, ah O(∩_∩)O haha~

C'est tout pour cet article. C'est terminé. Pour d'autres contenus passionnants, vous pouvez faire attention à la colonne Tutoriel vidéo HTML du site Web PHP chinois !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!