Bolehkah Anda Mengesan Peristiwa Klik pada Elemen Pseudo CSS?

Klik Pengesanan Acara pada Pseudo-Elements

Soalan:

Dalam kod yang disediakan, peristiwa klik dicetuskan pada kedua-dua unsur pseudo (bit merah) dan elemen utama (bit biru). Walau bagaimanapun, matlamatnya adalah untuk mengesan klik hanya pada unsur pseudo. Adakah ini mungkin?

Jawapan:

Tidak, peristiwa klik pada elemen pseudo tidak dapat dikesan secara langsung kerana ia tidak wujud sebagai sebahagian daripada Objek Dokumen Model (DOM). Pseudo-elements ialah elemen maya yang dijana oleh penyemak imbas dan bukan sebahagian daripada struktur HTML sebenar.

Pendekatan Alternatif:

Jika anda perlu melaksanakan klik pengendali khusus untuk kawasan merah, anda boleh mencipta elemen anak, seperti span:

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

Kemudian, gunakan gaya kepada elemen span:

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

Akhir sekali, ikat pengendali klik pada elemen span:

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

Pendekatan ini membolehkan anda menangkap klik pada kawasan merah sambil menghalang klik daripada dicetuskan pada elemen utama.

Atas ialah kandungan terperinci Bolehkah Anda Mengesan Peristiwa Klik pada Elemen Pseudo CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!