Bagaimanakah Saya Boleh Mengesan Peristiwa Klik pada Pseudo-Elements dalam HTML?

Mengesan Peristiwa Klik pada Elemen Pseudo

Dalam HTML, elemen pseudo memanjangkan keupayaan penggayaan dan visual sesuatu elemen tanpa benar-benar berada dalam pokok DOM. Ini memberikan cabaran apabila cuba mengesan peristiwa klik khususnya pada elemen pseudo.

Pertimbangkan HTML dan CSS berikut:

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

p {
    position: relative;
    background-color: blue;
}

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

Dalam contoh ini,

unsur mempunyai unsur pseudo merah melangkaui tepi kanannya. Matlamatnya adalah untuk mencetuskan acara klik hanya pada kawasan merah dan bukan segi empat tepat biru.

Penyelesaian

Malangnya, tidak mungkin untuk mengikat acara terus kepada pseudo -elemen kerana ia bukan sebahagian daripada pokok DOM. Pengendali klik hanya boleh terikat dengan elemen induknya.

Untuk mencapai kefungsian yang diingini, penyelesaian diperlukan:

• Buat elemen anak, seperti , dan letakkannya sejurus selepas pembukaan

  tag.

• Gunakan gaya CSS pada .p span dan bukannya p:before.
• Ikat pengendali klik pada elemen .p span.

Pendekatan ini pada asasnya mensimulasikan gelagat unsur pseudo sambil membenarkan pengendalian peristiwa pada kawasan minat tertentu.

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