Wie kann ich Klickereignisse auf CSS-Pseudoelementen erkennen?

Klicken Sie auf Ereigniserkennung bei Pseudoelementen

Pseudoelemente wie :before und :after verbessern die Gestaltungsmöglichkeiten von HTML-Elementen um Einfügen virtueller Inhalte. Diese virtuellen Elemente sind jedoch nicht Teil des DOM und verfügen nicht über direkte Möglichkeiten zur Ereignisbehandlung.

Im gegebenen Beispiel ist es problematisch, das Klickereignis nur auf dem roten Pseudoelement (erstellt mit p:before) zu erkennen. Da Pseudoelemente nicht im DOM dargestellt werden, können Sie Klickereignisse nicht direkt an sie binden.

Lösung:

Um das gewünschte Verhalten zu erreichen, sollten Sie die Verwendung eines untergeordneten Elements in Betracht ziehen Element anstelle eines Pseudoelements. Erstellen Sie ein Element und positionieren Sie es direkt nach dem öffnenden

Etikett. Wenden Sie die derzeit auf p:before angewendeten Stile auf dieses an. Element stattdessen.

<p>
  <span></span>Lorem ipsum dolor sit amet...
</p>

p span {
  content: '';
  position: absolute;
  left:100%;
  width: 10px;
  height: 100%;
  background-color: red;
}

Jetzt können Sie das Klickereignis an das -Element binden. Element und behandeln Sie das Ereignis entsprechend.

Hinweis:

Das Binden von Ereignissen an untergeordnete Elemente innerhalb von Pseudoelementen wird nicht in allen Browsern konsistent unterstützt. Für eine optimale browserübergreifende Kompatibilität sollten Sie den oben genannten Ansatz verwenden, anstatt sich bei der Ereignisbehandlung auf Pseudoelemente zu verlassen.

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