Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie können Sie Klickereignisse auf Pseudoelementen erkennen?

Susan Sarandon
Freigeben: 2024-11-21 00:01:15
Original
110 Leute haben es durchsucht

How Can You Detect Click Events on Pseudo-Elements?

Klickereignis nur auf Pseudoelement erkennen

Es ist üblich, Pseudoelemente zum Stilisieren von Elementen zu verwenden, ohne die DOM-Struktur zu beeinträchtigen. Eine häufige Herausforderung entsteht jedoch, wenn wir Ereignishandler an diese Pseudoelemente anhängen möchten.

Das Problem:

Der bereitgestellte Codeausschnitt zeigt ein Problem, bei dem ein Klick ausgeführt wird Das Ereignis wird sowohl für das übergeordnete Element (blaues Bit) als auch für das Pseudoelement (rotes Bit) ausgelöst, wenn auf das übergeordnete Element geklickt wird. Das Ziel besteht darin, das Klickereignis nur auf dem Pseudoelement zu erkennen.

Die Lösung:

Leider ist es nicht möglich, Ereignishandler direkt an Pseudoelemente anzuhängen. Elemente, da sie nicht Teil des DOM sind. Es gibt jedoch eine Problemumgehung:

  1. Erstellen Sie ein untergeordnetes Element: Erstellen Sie anstelle des Pseudoelements ein untergeordnetes Element (z. B. einen Span).
  2. Platzieren Sie das untergeordnete Element: Platzieren Sie das untergeordnete Element direkt nach dem öffnenden

    Tag.

  3. Stile auf das untergeordnete Element anwenden:Wenden Sie die gewünschten Stile auf das untergeordnete Element anstelle des Pseudoelements an.
  4. Ereignishandler anhängen: Binden Sie den Ereignishandler (z. B. Click) an das untergeordnete Element.

Das obige ist der detaillierte Inhalt vonWie können Sie Klickereignisse auf Pseudoelementen erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage