Quelle est la différence entre les événements mouseover et mouseenter?


153

J'ai toujours utilisé l' mouseoverévénement, mais en lisant la documentation jQuery, j'ai trouvé mouseenter. Ils semblent fonctionner exactement de la même manière.

Y a-t-il une différence entre les deux, et si oui, quand dois-je les utiliser?
(S'applique également pour mouseoutvs mouseleave).

Réponses:


118

Vous pouvez essayer l'exemple suivant à partir de la page de documentation jQuery . C'est une jolie petite démo interactive qui le rend très clair et que vous pouvez voir par vous-même.

En bref, vous remarquerez qu'un événement de survol de la souris se produit sur un élément lorsque vous le survolez - provenant de son élément enfant OU parent, mais un événement d'entrée de la souris se produit uniquement lorsque la souris se déplace de l'extérieur de cet élément vers cet élément.

Ou comme le mouseover()disent les documents :

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


40
Ce n'est pas vrai que mouseenter«ne se produit que lorsque la souris passe de l'élément parent à l'élément». L'événement se produit lorsque la souris passe de l' extérieur de l'élément à l'intérieur de celui-ci. Peu importe l'élément d'origine de la souris. Il est vrai que la souris viendra souvent du parent, mais pas toujours. Par exemple, si le parent n'a pas de remplissage ou de bordure, la souris peut entrer directement depuis le grand-parent et mouseenterse déclenche toujours. En fait, il peut même entrer dans l'élément depuis l'extérieur de la fenêtre (si l'élément est juste au bord) et l'événement se déclenche toujours.
callum

2
DEMO est la meilleure explication;)
Luckylooke

pour de vrai, jouez simplement avec la démo.
Kevin Wheeler du

43

Mouseenter et mouseleave ne réagissent à un barbotage d'événements, alors que mouseover et mouseOut font .

Voici un article qui décrit le comportement.


6
Cela l'explique parfaitement: bl.ocks.org/mbostock/5247027 mouseover se déclenche à chaque fois qu'il est déclenché depuis l'intérieur du conteneur, à cause du bouillonnement d'événement.
Rafael Emshoff

4

Comme c'est souvent le cas avec des questions comme celles-ci, Quirksmode a la meilleure réponse .

J'imagine que, parce que l'un des objectifs de jQuery est de rendre les choses indépendantes du navigateur, l'utilisation de l'un ou l'autre des noms d'événement déclenchera le même comportement. Edit: grâce à d'autres articles, je vois maintenant que ce n'est pas le cas


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);})
 });


si votre élément n'a pas d'éléments enfants, mais si l'élément a des enfants, alors les paires se comportent tout à fait différemment. En un mot, si vous passez votre souris dans un élément puis dans son enfant, mouseover / mouseout se déclencherait à la fois, alors que seul mouseenter se déclencherait puisque votre souris est toujours techniquement dans l'élément.
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.