Quelle est la différence entre jQuery's mouseout () et mouseleave ()?
Quelle est la différence entre jQuery's mouseout () et mouseleave ()?
L'événement mouseleave diffère de mouseout dans la façon dont il gère la propagation d'événements. Si mouseout était utilisé dans cet exemple, le gestionnaire se déclencherait lorsque le pointeur de la souris serait sorti de l'élément Inner. C'est généralement un comportement indésirable. En revanche, l'événement mouseleave 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 externe, mais pas l'élément interne.
Il peut y avoir des moments où mouseout est un meilleur choix que mouseleave.
Par exemple, supposons que vous ayez créé une info-bulle que vous souhaitez afficher à côté d'un élément dans mouseenter. Vous utilisez setTimeout pour empêcher l'info-bulle de s'afficher instantanément. Vous effacez le délai d'attente de mouseleave à l'aide de clearTimeout. Par conséquent, si la souris quitte l'info-bulle, elle ne s'affichera pas. Cela fonctionnera 99% du temps.
Mais supposons maintenant que l'élément auquel vous avez associé une info-bulle soit un bouton avec un événement click. Supposons également que ce bouton invite l'utilisateur à indiquer soit une boîte confirm, soit une alert. L'utilisateur clique sur le bouton et la variable alert est déclenchée. L'utilisateur a appuyé assez rapidement pour que votre info-bulle n'ait pas eu l'occasion de s'afficher (jusqu'à présent, tout va bien).
L'utilisateur appuie sur le bouton OK de la boîte alert et la souris quitte l'élément. Mais comme la page du navigateur est maintenant verrouillée, aucun javascript ne se déclenchera tant que le bouton OK n'aura pas été enfoncé, ce qui signifie que votre événement mouseleave NE FIRE PAS. Après que l'utilisateur ait appuyé sur OK, l'info-bulle apparaîtra (ce qui n'est pas ce que vous vouliez).
Utiliser mouseout dans ce cas serait la solution appropriée car cela se déclencherait.
aPI jQuery doc:
mouseout
Ce type d'événement peut causer de nombreux maux de tête en raison de la propagation d'événements. Par exemple, lorsque le pointeur de la souris quitte l'élément Inner dans cet exemple, un événement mouseout est envoyé à cet élément, puis passe au niveau supérieur. Cela peut déclencher le gestionnaire de souris lié à des moments inopportuns. Voir la discussion sur .mouseleave () pour une alternative utile.
Donc, mouseleave est un événement personnalisé, conçu pour la raison ci-dessus.
Event Mouseout se déclenche lorsque la souris quitte l'élément sélectionné et également lorsque la souris quitte ses éléments enfants.
L'élément Event Mouseleave se déclenche lorsque le pointeur quitte l'élément sélectionné uniquement.
Référence: W3School