Drei Möglichkeiten, Ereignisse an HTML-Tag-Pseudoelemente zu binden

Dieser Artikel stellt Ihnen drei Möglichkeiten vor, Ereignisse an HTML-Tag-Pseudoelemente zu binden. Ich hoffe, dass er Ihnen als Referenz dienen wird.

In einem aktuellen Projekt bin ich auf die Funktion gestoßen, auf ein Symbol zu klicken, um bestimmte Vorgänge auszuführen. Es sollte sehr einfach zu implementieren sein, aber das Symbol wird durch ::after Pseudoelement implementiert Es scheint, dass die Pseudoelementoperation nicht direkt ausgeführt werden kann, aber alle Seiten im Projekt zeigen Symbole über Pseudoelemente an und es ist nicht möglich, die Symbole auf allen Seiten in DOM-Elemente umzuwandeln.
Nachdem ich im Internet nachgesehen habe, führen die meisten von ihnen die Methode ein, die Mauszeigerkoordinaten über das Ereignisobjekt abzurufen, um festzustellen, ob der angeklickte Bereich der Bereich ist, in dem sich das Pseudoelement befindet. Dies ist jedoch sehr mühsam.

Das Folgende ist eine Zusammenfassung mehrerer einfacher Möglichkeiten zur Handhabung der Ereignisverarbeitung beim Klicken auf Pseudoelemente, mit angehängtem Beispielcode.

HTML-Struktur

Zuallererst ist die HTML-Struktur so

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

Implementierungsmethode

Die erste

über CSS3 Pointer-Events-Eigenschaften, die erreicht werden sollen.

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>

Der zweite Typ

wird durch Verhindern von Event-Bubbling implementiert

CSS-Basiscode Das Gleiche wie Ändern Sie oben pointer-events: none und 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>

Die dritte Methode

Verwendet die Zeigerkoordinaten des Ereignisobjekts, um zu bestimmen, ob der Klick im Bereich des Pseudoelements liegt. Sie können es finden indem du nach Du Niang gehst.

Das Letzte ist, wenn es nicht funktioniert, verwenden Sie nicht ::. Ersetzen Sie es anschließend durch den tatsächlichen Dom-Knoten, ah O(∩_∩)O haha~

Dieser Artikel ist hier. Weitere spannende Inhalte finden Sie in der Spalte HTML-Video-Tutorial auf der chinesischen PHP-Website!

Das obige ist der detaillierte Inhalt vonDrei Möglichkeiten, Ereignisse an HTML-Tag-Pseudoelemente zu binden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!