2010-11-23 4 views

Répondre

76

L'événement mouseleave diffère de mouseout dans la façon dont il gère le barbotage d'événements. Si mouseout a été utilisé dans cet exemple, lorsque le pointeur de la souris est sorti de l'élément Inner, le gestionnaire est déclenché. C'est habituellement un comportement indésirable. L'événement mouseleave, d'autre part, ne déclenche son gestionnaire que lorsque la souris quitte l'élément auquel elle est liée, et non 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/

Étonnamment il y a beaucoup de résultats @http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=jquery+mouseleave+mouseout+difference

+0

mouseover vs. mouseenter: https: // jsfiddle.net/hejdav/945pv53h/3/(mouseout & mouseleave équivalent) – hejdav

8

jQuery API doc:

mouseout

Ce type d'événement peut causer de nombreux maux de tête dus à l'événement bouillonnant. 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 passera à Outer. Cela peut déclencher le gestionnaire de mouseout lié à des moments inopportuns. Voir la discussion sur .mouseleave() pour une alternative utile.

Donc mouseleave est un événement personnalisé, qui a été conçu pour la raison ci-dessus.

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

11

Il peut y avoir des moments où mouseout est un meilleur choix que mouseleave. Par exemple, supposons que vous ayez créé une info-bulle à afficher en regard d'un élément sur mouseenter. Vous utilisez setTimeout pour empêcher l'affichage instantané de l'info-bulle. Vous effacez le délai d'attente sur mouseleave en utilisant clearTimeout, donc si la souris quitte l'info-bulle ne sera pas affichée. Cela fonctionnera 99% du temps.

Mais maintenant, disons que l'élément que vous avez une info-bulle est attaché à un bouton avec un événement click, et supposons également ce bouton invite l'utilisateur soit avec une boîte confirm ou alert. L'utilisateur clique sur le bouton et les feux alert. L'utilisateur l'a appuyé assez rapidement pour que votre info-bulle n'ait pas l'occasion de s'afficher (jusqu'à présent, tout va bien).

L'utilisateur appuie sur le bouton OK du bloc alert et la souris quitte l'élément. Mais puisque 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 événement mouseleaveNE TIRERA PAS. Lorsque l'utilisateur appuie sur OK, l'info-bulle apparaîtra (ce qui n'est pas ce que vous vouliez).

En utilisant mouseout dans ce cas serait la solution appropriée, car il tirera.

+2

Pourriez-vous expliquer pourquoi «mouseout» dans ce cas se déclenchera? Le navigateur ne serait-il pas encore en état bloqué pour «mouseout»? – user31782

Questions connexes