Bagaimanakah Saya Boleh Mengesan Peristiwa Klik pada Elemen Pseudo CSS?

Klik Pengesanan Peristiwa pada Elemen Pseudo

Elemen Pseudo, seperti :sebelum dan :selepas, tingkatkan keupayaan penggayaan elemen HTML dengan memasukkan kandungan maya. Walau bagaimanapun, elemen maya ini bukan sebahagian daripada DOM dan tidak mempunyai keupayaan pengendalian acara langsung.

Dalam contoh yang diberikan, mengesan acara klik hanya pada elemen pseudo merah (dicipta menggunakan p:before) adalah bermasalah. Memandangkan elemen pseudo tidak diwakili dalam DOM, anda tidak boleh mengikat acara klik terus kepada mereka.

Penyelesaian:

Untuk mencapai tingkah laku yang diingini, pertimbangkan untuk menggunakan kanak-kanak elemen bukannya unsur pseudo. Buat elemen dan letakkannya sejurus selepas pembukaan

tag. Gunakan gaya yang sedang digunakan pada p:sebelum ini elemen sebaliknya.

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

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

Kini anda boleh mengikat acara klik pada elemen dan kendalikan acara dengan sewajarnya.

Nota:

Mengikat peristiwa kepada elemen kanak-kanak dalam elemen pseudo tidak disokong dalam semua penyemak imbas secara konsisten. Untuk keserasian silang penyemak imbas yang optimum, pertimbangkan untuk menggunakan pendekatan di atas dan bukannya bergantung pada elemen pseudo untuk pengendalian acara.

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