Bagaimana untuk Mencegah Peristiwa Tetikus Tidak Dijangka dalam DIV Bersarang?

Menguruskan Peristiwa Tetikus dalam Struktur DIV Bersarang

Apabila mengendalikan acara tetikus dalam elemen DIV bersarang, selalunya tidak diingini untuk peristiwa itu tercetus apabila tetikus melayang di atas elemen kanak-kanak. Ini dikenali sebagai peristiwa menggelegak, di mana peristiwa merambat ke atas pokok DOM, yang berpotensi mencetuskan gelagat yang tidak dijangka.

Mencegah Peristiwa Tetikus dalam Elemen Kanak-kanak

Untuk menghalang acara keluar tetikus daripada menembak apabila tetikus berada di atas elemen kanak-kanak, terdapat dua elemen utama pendekatan:

1. Atribut Peristiwa onmouseleave

Atribut onmouseleave boleh digunakan pada elemen DIV induk. Atribut ini mencetuskan peristiwa hanya apabila tetikus meninggalkan sempadan DIV induk, bukan apabila ia melayang di atas elemen anak.

Contoh:

<div class="parent" onmouseleave="yourFunction()">
    <div class="child"></div>
</div>

2. jQuery mouseleave() Function

jQuery menyediakan fungsi mouseleave() yang berkelakuan serupa dengan atribut onmouseleave. Ia mencetuskan peristiwa hanya apabila tetikus meninggalkan sempadan elemen yang ditentukan.

Contoh:

$(".parent").mouseleave(function() {
    // Your code here
});

Butiran Pelaksanaan

• Dalam kedua-duanya kes, fungsi pengendali acara akan dilaksanakan hanya apabila tetikus keluar dari DIV induk sempadan.
• Elemen anak dalam DIV induk tidak akan mencetuskan peristiwa.
• Atribut onmouseleave lebih ringkas dan tidak memerlukan jQuery.
• fungsi mouseleave() jQuery menyediakan fleksibiliti tambahan dan keserasian merentas pelayar.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Peristiwa Tetikus Tidak Dijangka dalam DIV Bersarang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!