Bagaimana untuk Menjadikan Div Kedap Klik dengan CSS Pointer-Events?

Acara Penunjuk CSS: Menjadikan Div Kedap Klik

Apabila melaksanakan div tindanan telus, ia menjadi mencabar untuk berinteraksi dengan asas elemen, kerana tindanan memintas klik dan acara tetikus lain. Untuk menangani perkara ini, sifat CSS pointer-events boleh digunakan.

Memahami Pointer-Events

Properti pointer-events mengawal cara elemen tertentu bertindak balas kepada input pengguna . Menetapkan acara penunjuk: tiada; pada elemen menjadikannya tidak kelihatan kepada peristiwa tetikus sambil membiarkan penampilan visualnya utuh.

Melaksanakan Penyelesaian

Pertimbangkan contoh berikut:

<code class="html"><div id="container">
    <p>Some text</p>
    <div id="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%">
        ... some content ...
    </div>
</div></code>

Untuk menjadikan div #overlay tidak kelihatan kepada klik, kami boleh menambah peraturan CSS berikut:

<code class="css">#overlay {
  pointer-events: none;
}</code>

Kini, klik tetikus dan acara lain akan melalui div tindanan tanpa mencetuskan sebarang interaksi.

Sokongan Pelayar

acara penuding disokong dalam penyemak imbas moden:

• Firefox 3.6
• Chrome 2
• IE 11
• Safari 4

Penyelesaian Penyemak Imbas Merentas

Malangnya, tiada penyelesaian merentas penyemak imbas yang diketahui untuk acara penunjuk.

Atas ialah kandungan terperinci Bagaimana untuk Menjadikan Div Kedap Klik dengan CSS Pointer-Events?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!