Können Sie Klickereignisse auf CSS-Pseudoelementen erkennen?

Klicken Sie auf Ereigniserkennung bei Pseudoelementen

Frage:

Im bereitgestellten Code Ein Klickereignis wird sowohl auf dem Pseudoelement (rotes Bit) als auch auf dem Hauptelement (blaues Bit) ausgelöst. Das Ziel besteht jedoch darin, Klicks nur auf das Pseudoelement zu erkennen. Ist das möglich?

Antwort:

Nein, es ist nicht möglich, Klickereignisse auf Pseudoelementen direkt zu erkennen, da diese nicht als Teil des Dokumentobjekts vorhanden sind Modell (DOM). Pseudoelemente sind virtuelle Elemente, die vom Browser generiert werden und nicht Teil der eigentlichen HTML-Struktur sind.

Alternativer Ansatz:

Wenn Sie einen Klick implementieren müssen Wenn Sie einen Handler speziell für den roten Bereich verwenden, können Sie ein untergeordnetes Element erstellen, z. B. einen Span:

<p>
  <span class="red-bit"></span>
  Lorem ipsum dolor sit amet, ...
</p>

Anschließend wenden Sie Stile auf den Span an Element:

.red-bit {
  position: absolute;
  left: 100%;
  width: 10px;
  height: 100%;
  background-color: red;
}

Schließlich binden Sie den Click-Handler an das Span-Element:

document.querySelector(".red-bit").addEventListener("click", function() {
  // Click handler code
});

Mit diesem Ansatz können Sie Klicks im roten Bereich erfassen und gleichzeitig verhindern, dass Klicks auf dem ausgelöst werden Hauptelement.

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