Jaka jest różnica między zdarzeniami mouseover i mouseenter?

152

Od zawsze korzystałem ze mouseoverzdarzenia, ale czytając dokumentację jQuery znalazłem mouseenter. Wydają się działać dokładnie tak samo.

Czy jest między nimi różnica, a jeśli tak, to kiedy należy ich używać?
(Dotyczy również mouseoutVS mouseleave).

informatik01
źródło

Odpowiedzi:

117

Możesz wypróbować następujący przykład ze strony dokumentacji jQuery . To ładne, interaktywne demo, które sprawia, że ​​jest bardzo jasne i możesz się o tym przekonać.

Krótko mówiąc, zauważysz, że zdarzenie myszy nad elementem występuje na elemencie, gdy jesteś nad nim - pochodzącym z jego elementu podrzędnego LUB nadrzędnego, ale zdarzenie wejścia myszą występuje tylko wtedy, gdy mysz przesuwa się z zewnątrz tego elementu do tego elementu.

Lub jakmouseover() ujął to dokumentacja :

[ .mouseover()] może powodować wiele bólów głowy z powodu bulgotania zdarzeń. Na przykład, gdy wskaźnik myszy przesunie się nad elementem wewnętrznym w tym przykładzie, zostanie do niego wysłane zdarzenie najechania myszą, a następnie przepłynie do Outer. Może to spowodować wyzwolenie naszego programu obsługi ruchu myszy w nieodpowiednich momentach. Zobacz dyskusję na temat .mouseenter()użytecznej alternatywy.

Keith Bentrup
źródło
40
Nie jest prawdą, że mouseenter„występuje tylko wtedy, gdy mysz przesuwa się z elementu nadrzędnego do elementu”. Zdarzenie występuje, gdy mysz zmienia się z zewnątrz elementu do wewnątrz niego. Nie ma znaczenia, z jakiego elementu pochodzi mysz. To prawda, że ​​mysz często będzie pochodzić od rodzica, ale nie zawsze. Np. Jeśli rodzic nie ma wypełnienia ani obramowania, wtedy mysz może wejść prosto od dziadka i mouseenternadal będzie działać. W rzeczywistości może nawet wejść do elementu spoza rzutni (jeśli element znajduje się tuż przy krawędzi), a zdarzenie nadal jest uruchamiane.
callum
2
DEMO to najlepsze wytłumaczenie;)
Luckylooke
naprawdę, po prostu pobaw się demo.
Kevin Wheeler,
43

Mouseenter i mouseleave nie reagują na bulgotanie zdarzeń, podczas gdy najeżdżanie myszą i wyprowadzanie myszy tak .

Oto artykuł opisujący zachowanie.

Józefa
źródło
6
To wyjaśnia to doskonale: bl.ocks.org/mbostock/5247027 uruchamia się za każdym razem, gdy jest uruchamiany z kontenera, z powodu bulgotania zdarzenia.
Rafael Emshoff
4

Jak to często bywa w przypadku takich pytań, Quirksmode ma najlepszą odpowiedź .

Wyobrażam sobie, że ponieważ jednym z celów jQuery jest uczynienie rzeczy agnostycznych przeglądarkami, użycie dowolnej nazwy zdarzenia wywoła to samo zachowanie. Edycja: dzięki innym postom, teraz widzę, że tak nie jest

Peter Bailey
źródło
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);})
 });

nawigować
źródło
jeśli twój element nie ma elementów podrzędnych, ale jeśli element ma dzieci, wtedy pary zachowują się zupełnie inaczej. W skrócie, jeśli przekażesz myszkę do elementu, a następnie do jego elementu podrzędnego, jednocześnie uruchomi się funkcja mouseover / mouseout, podczas gdy tylko mouseenter będzie działać, ponieważ mysz technicznie nadal znajduje się wewnątrz elementu.
naveed