web-dev-qa-db-fra.com

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

J'ai toujours utilisé l'événement mouseover, mais lors de la lecture de la documentation jQuery, j'ai trouvé mouseenter. Ils semblent fonctionner exactement les mêmes.

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

javascriptjqueryeventsjavascript-events
146
Tom

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

var i = 0;
$("div.overout")
  .mouseover(function() {
    i += 1;
    $(this).find("span").text("mouse over x " + i);
  })
  .mouseout(function() {
    $(this).find("span").text("mouse out ");
  });

var n = 0;
$("div.enterleave")
  .mouseenter(function() {
    n += 1;
    $(this).find("span").text("mouse enter x " + n);
  })
  .mouseleave(function() {
    $(this).find("span").text("mouse leave");
  });
div.out {
  width: 40%;
  height: 120px;
  margin: 0 15px;
  background-color: #d6edfc;
  float: left;
}

div.in {
  width: 60%;
  height: 60%;
  background-color: #fc0;
  margin: 10px auto;
}

p {
  line-height: 1em;
  margin: 0;
  padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="out overout">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>

<div class="out enterleave">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>

En bref, vous remarquerez qu’un événement survolant la souris se produit sur un élément lorsque vous le survolez - provenant de l’élément parent OR), mais un événement d’entrée de la souris ne se produit que lorsque la souris se déplace de l'extérieur de cet élément à cet élément.

Ou comme la mouseover() docs le mettre:

[.mouseover()] peut causer de nombreux maux de tête en raison de la propagation d'événements. Par exemple, lorsque le pointeur de la souris passe sur l'élément Inner dans cet exemple, un événement mouseover est envoyé à cet élément, puis passe au niveau supérieur. Cela peut déclencher notre gestionnaire mouseover lié à des moments inopportuns. Voir la discussion sur .mouseenter() pour une alternative utile.

113
Keith Bentrup

Mouseenter et Mouseleave ne réagissent pas à la propagation d'événements, tandis que les fonctions mouseover et mouseout ne font pas .

Voici un article qui décrit le comportement.

41
Joseph

Comme c'est souvent le cas avec de telles questions, 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 nom d'événement déclenchera le même comportement. Edit: merci à d'autres posts, je vois maintenant que ce n'est pas le cas

4
Peter Bailey
$(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);})
 });
0
naveed