Apa perbedaan antara peristiwa mouseover dan mouseenter?


153

Saya selalu menggunakan mouseoveracara tersebut, tetapi ketika membaca dokumentasi jQuery yang saya temukan mouseenter. Mereka tampaknya berfungsi persis sama.

Apakah ada perbedaan antara keduanya, dan jika demikian kapan saya harus menggunakannya?
(Juga berlaku untuk mouseoutvs mouseleave).

Jawaban:


118

Anda dapat mencoba contoh berikut dari halaman doc jQuery . Ini adalah demo interaktif kecil yang menyenangkan yang membuatnya sangat jelas dan Anda benar-benar dapat melihatnya sendiri.

Singkatnya, Anda akan melihat bahwa peristiwa mouse over terjadi pada suatu elemen ketika Anda mengatasinya - yang berasal dari elemen anaknya ATAU elemen induknya, tetapi peristiwa enter mouse hanya terjadi ketika mouse bergerak dari luar elemen ini ke elemen ini.

Atau seperti yang mouseover()tertulis dalam dokumen :

[ .mouseover()] dapat menyebabkan banyak sakit kepala karena peristiwa menggelegak. Misalnya, ketika penunjuk tetikus bergerak di atas elemen dalam dalam contoh ini, peristiwa mouseover akan dikirim ke sana, kemudian mengalir ke luar. Ini dapat memicu handler mouseover handler kami pada waktu yang tidak tepat. Lihat diskusi untuk .mouseenter()alternatif yang bermanfaat.


40
Tidak benar bahwa mouseenter"hanya terjadi ketika mouse bergerak dari elemen induk ke elemen". Peristiwa ini terjadi ketika mouse berubah dari di luar elemen ke di dalamnya. Tidak masalah dari elemen mana tikus itu berasal. Memang benar bahwa mouse akan sering datang dari induknya, tetapi tidak selalu. Misalnya, jika orang tua tidak memiliki bantalan atau pembatas, maka mouse dapat masuk langsung dari kakek-nenek, dan mouseenterakan tetap menyala. Bahkan, ia bahkan dapat memasukkan elemen dari luar viewport (jika elemen tepat di tepi) dan acara masih menyala.
callum

2
DEMO adalah penjelasan terbaik;)
Luckylooke

sebenarnya, hanya bermain-main dengan demo.
Kevin Wheeler

43

Mouseenter dan mouseleave tidak bereaksi terhadap peristiwa menggelegak, sedangkan mouseover dan mouseout lakukan .

Inilah artikel yang menjelaskan perilaku tersebut.


6
Ini menjelaskannya dengan sempurna: bl.ocks.org/mbostock/5247027 mouse di atas api setiap kali dilepaskan dari dalam wadah, karena peristiwa yang menggelegak.
Rafael Emshoff

4

Seperti yang sering terjadi pada pertanyaan-pertanyaan seperti ini, Quirksmode memiliki jawaban terbaik .

Saya akan membayangkan hal itu, karena salah satu tujuan jQuery adalah membuat browser menjadi agnostik, bahwa menggunakan salah satu nama acara akan memicu perilaku yang sama. Sunting: terima kasih untuk posting lain, sekarang saya melihat ini tidak terjadi


0
$(document).ready(function() {
$("#outer_mouseover").bind
("Mouse Over Mouse Out",function(event){
console.log(event.type," :: ",this.id);})
$("#outer_mouseenter").bind
("Mouse enter Mouse leave",function(event){
console.log(event.type," :: ",this.id);})
 });


jika elemen Anda tidak memiliki elemen anak, tetapi jika elemen tersebut memiliki anak, maka pasangan berperilaku sangat berbeda. Singkatnya, jika Anda memasukkan mouse ke elemen dan kemudian ke anaknya, mouseover / mouseout akan menyala, sedangkan hanya mouseenter yang akan menyala karena mouse Anda secara teknis masih berada di dalam elemen.
naveed
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.