Bagaimanakah Saya Boleh Menghalang Peristiwa Mouseout daripada Mencetuskan Elemen Kanak-Kanak Di Dalam Div yang Diposisikan Benar?

Menggagalkan Acara Tetikus pada Elemen Kanak-kanak Dalam Div Mutlak: Perjalanan Tanpa jQuery

Berurusan dengan acara onmouseout dalam div yang berkedudukan mutlak menjadi rumit, terutamanya apabila anda ingin mengelak daripada mencetuskan acara apabila tetikus melayang di atas elemen kanak-kanak dalam div. Fenomena ini berlaku disebabkan oleh peristiwa menggelegak, mekanisme di mana peristiwa merambat ke atas pokok DOM, menjejaskan elemen induk walaupun dicetuskan oleh keturunannya.

Untuk menghalang kelakuan ini dan menghalang peristiwa keluar tetikus daripada menembak apabila tetikus berinteraksi dengan elemen kanak-kanak, anda boleh menggunakan penyelamat senario ini: acara onmouseleave. Tidak seperti onmouseout, onmouseleave hanya tercetus apabila tetikus keluar dari elemen itu sendiri, bukan apabila ia hanyut ke mana-mana elemen anaknya.

Melaksanakan penyelesaian ini adalah mudah: cuma gantikan onmouseout dengan onmouseleave dalam div yang diposisikan sepenuhnya.

<div class="outer" onmouseleave="yourFunction()">
  <div class="inner"></div>
</div>

Bagi mereka yang lebih suka jQuery, kaedah mouseleave() menawarkan kaedah yang serupa penyelesaian.

$(".outer").mouseleave(function() {
  // your code here
});

Untuk menggambarkan lagi keberkesanan pendekatan ini, lihat contoh ini: Pautan Contoh.

Dengan menerima acara onmouseleave atau rakan jQuerynya, anda boleh menahan dengan berkesan acara keluar tetikus daripada mengganggu interaksi anda dengan elemen kanak-kanak dalam div mutlak.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghalang Peristiwa Mouseout daripada Mencetuskan Elemen Kanak-Kanak Di Dalam Div yang Diposisikan Benar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!