Jaka jest różnica między jQuery's mouseout () i mouseleave ()?

Jaka jest różnica między jQuery's mouseout () i mouseleave ()?

Zdarzenie mouseleave różni się od mouseout sposobem obsługi propagacji zdarzeń. Gdyby w tym przykładzie użyto funkcji mouseout, to po przesunięciu wskaźnika myszy poza element wewnętrzny zostanie wyzwolony moduł obsługi. Zwykle jest to niepożądane zachowanie. Z drugiej strony zdarzenie mouseleave wyzwala swój program obsługi tylko wtedy, gdy mysz opuszcza element, do którego jest przypisana, a nie element podrzędny. W tym przykładzie procedura obsługi jest wyzwalana, gdy mysz opuszcza element Outer, ale nie element Inner.

Źródło: http://api.jquery.com/mouseleave/

Może się zdarzyć, że mouseoutbędzie lepszym wyborem niż mouseleave.

Na przykład, powiedzmy, że utworzyłeś podpowiedź, która ma być wyświetlana obok elementu mouseenter. Używasz, setTimeoutaby zapobiec natychmiastowemu wyświetlaniu podpowiedzi. Wyczyścisz limit czasu podczas mouseleaveużywania, clearTimeoutwięc jeśli mysz opuści etykietkę, nie będzie wyświetlana. Będzie to działać w 99% przypadków.

Ale teraz załóżmy, że element, do którego jest dołączona podpowiedź, jest przyciskiem ze clickzdarzeniem i załóżmy również, że ten przycisk wyświetla użytkownikowi pole confirmlub alertpole. Użytkownik klika przycisk i alertodpala. Użytkownik nacisnął przycisk na tyle szybko, że Twoja podpowiedź nie miała szansy się wyświetlić (jak na razie dobrze).

Użytkownik naciska przycisk alertbox OK, a myszka opuszcza element. Ale ponieważ strona przeglądarki jest teraz w stanie zablokowanym, żaden skrypt javascript nie zostanie uruchomiony, dopóki nie zostanie naciśnięty przycisk OK, co oznacza, że mouseleavezdarzenie NIE ZAPALI . Po naciśnięciu OK przez użytkownika pojawi się okienko z informacją (co nie jest tym, czego chciałeś).

Użycie mouseoutw tym przypadku byłoby odpowiednim rozwiązaniem, ponieważ będzie odpalać.

Dokumentacja jQuery API:

mouseout

Ten typ zdarzenia może powodować wiele bólów głowy z powodu bulgotania zdarzeń. Na przykład, gdy wskaźnik myszy wyjdzie z elementu wewnętrznego w tym przykładzie, zostanie do niego wysłane zdarzenie mouseout, a następnie przepłynie do Outer. Może to wyzwolić powiązaną procedurę obsługi wyjścia myszy w nieodpowiednich momentach. Zobacz dyskusję na temat .mouseleave (), aby znaleźć przydatną alternatywę.

Tak samo mouseleavejest z niestandardowym wydarzeniem, które zostało zaprojektowane z powyższego powodu.

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

Wydarzenie Mouseout zostanie uruchomione, gdy mysz opuści wybrany element, a także gdy mysz opuści jego elementy potomne.

Element Event Mouseleave zostanie wyzwolony, gdy wskaźnik opuści tylko wybrany element.

Źródła : W3School