Quelle est la différence entre mouseout () et mouseleave () de jQuery?


Réponses:


101

L'événement mouseleave diffère de mouseout par la façon dont il gère le bullage d'événements. Si mouseout était utilisé dans cet exemple, alors lorsque le pointeur de la souris sortait de l'élément Inner, le gestionnaire serait déclenché. Il s'agit généralement d'un comportement indésirable. L'événement mouseleave, en revanche, ne déclenche son gestionnaire que lorsque la souris quitte l'élément auquel elle est liée, pas un descendant. Ainsi, dans cet exemple, le gestionnaire est déclenché lorsque la souris quitte l'élément Outer, mais pas l'élément Inner.

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


1
mouseover vs mouseenter: jsfiddle.net/hejdav/945pv53h/3 (mouseout et mouseleave de manière équivalente)
hejdav

L'explication ci-dessus devient beaucoup plus claire lorsque l'on voit les deux méthodes fonctionner et la différence entre elles, a fonctionné pour moi.
invinciblemuffi

15

Il peut y avoir des moments où mouseoutest un meilleur choix que mouseleave.

Par exemple, disons que vous avez créé une info-bulle que vous souhaitez afficher à côté d'un élément mouseenter. Vous utilisez setTimeoutpour empêcher l'info-bulle d'apparaître instantanément. Vous effacez le délai lors de l' mouseleaveutilisation clearTimeout, si la souris quitte l'info-bulle ne sera pas affichée. Cela fonctionnera 99% du temps.

Mais maintenant, disons que l'élément auquel une info-bulle est attachée est un bouton avec un clickévénement, et supposons également que ce bouton invite l'utilisateur avec une boîte confirmou alert. L'utilisateur clique sur le bouton et les alertincendies. L'utilisateur a appuyé dessus assez rapidement pour que votre info-bulle n'ait aucune chance de s'afficher (jusqu'à présent, tout va bien).

L'utilisateur appuie sur le alertbouton OK de la boîte et la souris quitte l'élément. Mais comme la page du navigateur est maintenant dans un état verrouillé, aucun javascript ne se déclenchera tant que le bouton OK n'aura pas été enfoncé, ce qui signifie que votre mouseleaveévénement NE SE DÉBUTERA PAS . Une fois que l'utilisateur a appuyé sur OK, l'info-bulle apparaîtra (ce qui n'est pas ce que vous vouliez).

L'utilisation mouseoutdans ce cas serait la solution appropriée car elle se déclenchera.


5
Pourriez-vous expliquer pourquoi mouseoutdans ce cas va tirer? Le navigateur ne serait-il pas toujours verrouillé pendant mouseout?
user31782

10

Documentation de l'API jQuery:

mouseout

Ce type d'événement peut causer de nombreux maux de tête en raison du bouillonnement d'événements. Par exemple, lorsque le pointeur de la souris sort de l'élément Inner dans cet exemple, un événement mouseout sera envoyé à celui-ci, puis remontera vers Outer. Cela peut déclencher le gestionnaire de mouseout lié à des moments inopportuns. Voir la discussion sur .mouseleave () pour une alternative utile.

Il en mouseleaveva de même pour un événement personnalisé, qui a été conçu pour la raison ci-dessus.

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


3

L'événement Mouseout se déclenchera lorsque la souris quitte l'élément sélectionné et également lorsque la souris quitte ses éléments enfants.

L'élément d'événement Mouseleave se déclenchera lorsque le pointeur quittera uniquement l'élément sélectionné.

Référence: W3School

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.