Apa perbedaan antara mouseout () dan mouseleave () jQuery?

Jawaban:

101

Peristiwa mouseleave berbeda dari mouseout dalam cara menangani peristiwa menggelegak. Jika mouseout digunakan dalam contoh ini, maka saat penunjuk mouse dipindahkan dari elemen Dalam, penangan akan terpicu. Ini biasanya merupakan perilaku yang tidak diinginkan. Sebaliknya, peristiwa mouseleave, hanya memicu penangannya saat mouse meninggalkan elemen yang terikat padanya, bukan turunannya. Jadi dalam contoh ini, penangan dipicu saat mouse meninggalkan elemen Luar, tetapi bukan elemen Dalam.

Sumber: http://api.jquery.com/mouseleave/

meder omuraliev
sumber
1
mouseover vs. mouseenter: jsfiddle.net/hejdav/945pv53h/3 (mouseout & mouseleave ekuivalen)
hejdav
Penjelasan di atas menjadi jauh lebih jelas ketika melihat kedua metode bekerja dan perbedaan di antara keduanya, berhasil untuk saya.
invinciblemuffi
15

Ada saat-saat ketika mouseoutada pilihan yang lebih baik daripada mouseleave.

Misalnya, Anda telah membuat keterangan alat yang ingin Anda tampilkan di sebelah elemen mouseenter. Anda gunakan setTimeoutuntuk mencegah tooltip muncul secara instan. Anda menghapus batas waktu saat mouseleavemenggunakan clearTimeoutjadi jika mouse meninggalkan tooltip tidak akan ditampilkan. Ini akan berhasil 99% dari waktu.

Tapi sekarang katakanlah elemen Anda memiliki tooltip yang dilampirkan adalah tombol dengan clickkejadian, dan mari kita asumsikan juga tombol ini meminta pengguna dengan kotak confirmatau alert. Pengguna mengklik tombol dan alertkebakaran. Pengguna menekannya cukup cepat sehingga tooltip Anda tidak memiliki kesempatan untuk muncul (sejauh ini bagus).

Pengguna menekan alerttombol OK kotak, dan mouse meninggalkan elemen. Tetapi karena halaman browser sekarang dalam keadaan terkunci, tidak ada javascript yang akan aktif sampai tombol OK ditekan, artinya mouseleaveacara Anda TIDAK AKAN FIRE . Setelah pengguna menekan OK, tooltip akan muncul (bukan yang Anda inginkan).

Menggunakan mouseoutdalam kasus ini akan menjadi solusi yang tepat karena akan menembak.

Darcy
sumber
5
Bisakah Anda menjelaskan mengapa mouseoutdalam kasus itu akan menembak? Bukankah browser masih dalam keadaan terkunci mouseout?
pengguna31782
10

Dokumen jQuery API:

mouseout

Jenis acara ini dapat menyebabkan banyak sakit kepala karena acara menggelegak. Misalnya, saat penunjuk mouse bergerak keluar dari elemen Dalam dalam contoh ini, peristiwa mouseout akan dikirim ke sana, lalu menetes ke Luar. Ini dapat memicu penangan mouseout terikat pada waktu yang tidak tepat. Lihat pembahasan untuk .mouseleave () untuk alternatif yang berguna.

Begitu mouseleavejuga acara khusus, yang dirancang karena alasan di atas.

http://api.jquery.com/mouseleave/

jAndy
sumber
3

Mouseout Peristiwa akan memicu saat mouse meninggalkan elemen yang dipilih dan juga saat mouse meninggalkan elemen turunannya juga.

Elemen Event Mouseleave akan terpicu ketika pointer akan meninggalkan elemen yang dipilih saja.

Referensi: W3School

shyam Jaiswal
sumber