web-dev-qa-db-fra.com

Jquery mouseenter () vs mouseover ()

Donc, après avoir lu une réponse récente question , je ne sais pas si je comprends vraiment la différence entre la mouseenter() et mouseover(). La poste déclare

MouseOver ():

Tirera en entrant dans un élément et chaque fois que des mouvements de souris se produisent dans l'élément.

MouseEnter ():

Va tirer en entrant dans un élément.

Je suis venu avec un violon qui utilise les deux et ils semblent être assez similaires. Quelqu'un peut-il m'expliquer s'il vous plaît la différence entre les deux?

J'ai également essayé de lire les définitions de JQuery, les deux disent la même chose.

L'événement mouseover est envoyé à un élément lorsque le pointeur de la souris entre dans l'élément

L'événement mouseenter est envoyé à un élément lorsque le pointeur de la souris entre dans l'élément.

Quelqu'un peut-il s'il vous plaît clarifier avec un exemple?

jquerydom-events
162
aziz punjani

Vous voyez le comportement lorsque votre élément cible contient des éléments enfants:

http://jsfiddle.net/ZCWvJ/7/

Chaque fois que votre souris entre dans ou quitte un élément enfant, mouseover est déclenché, mais pas mouseenter.

$('#my_div').bind("mouseover mouseenter", function(e) {
  var el = $("#" + e.type);
  var n = +el.text();
  el.text(++n);
});
#my_div {
  padding: 0 20px 20px 0;
  background-color: #eee;
  margin-bottom: 10px;
  width: 90px;
  overflow: hidden;
}

#my_div>div {
  float: left;
  margin: 20px 0 0 20px;
  height: 25px;
  width: 25px;
  background-color: #aaa;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<div>MouseEnter: <span id="mouseenter">0</span></div>
<div>MouseOver: <span id="mouseover">0</span></div>

<div id="my_div">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
259
gilly3

C'est l'un des meilleurs exemples que j'ai trouvé de:

  • mouseenter
  • passer la souris
  • souris
  • laisser la souris

http://bl.ocks.org/mbostock/5247027

27
Christopher

Cependant, bien qu'ils fonctionnent de la même manière, l'événement mouseenter uniquement se déclenche lorsque le pointeur de la souris entre dans l'élément sélectionné. L'événement mouseover est déclenché si un pointeur de la souris entre également dans un élément enfant.

11
ErickBest

Voir l'exemple de code et de démonstration au bas de la page de documentation de jquery:

http://api.jquery.com/mouseenter/

... mouseover se déclenche lorsque le pointeur se déplace également dans l'élément enfant, tandis que mouseenter ne se déclenche que lorsque le pointeur se déplace dans l'élément lié.

4
Willem

L'événement mouseenter diffère de mouseover dans la manière dont il gère la propagation d'événements . L'événement mouseenter , seul déclenche son gestionnaire lorsque le la souris entre l'élément auquel il est lié, et non un descendant . Voir: https://api.jquery.com/mouseenter/

L'événement mouseleave diffère de mouseout dans la manière dont il gère la propagation d'événements . L'événement mouseleave , seul déclenche son gestionnaire lorsque le la souris laisse l'élément auquel il est lié, et non un descendant . Voir: https://api.jquery.com/mouseleave/

4
user2330678

Cet exemple montre la différence entre le mousemove , mouseenter et événements mouseover :

https://jsfiddle.net/z8g613yd/

HTML:

<div onmousemove="myMoveFunction()">
    <p>onmousemove: <br> <span id="demo">Mouse over me!</span></p>
</div>

<div onmouseenter="myEnterFunction()">
    <p>onmouseenter: <br> <span id="demo2">Mouse over me!</span></p>
</div>

<div onmouseover="myOverFunction()">
    <p>onmouseover: <br> <span id="demo3">Mouse over me!</span></p>
</div>

CSS:

div {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    float: left;
    padding: 30px;
    text-align: center;
    background-color: lightgray;
}

p {
    background-color: white;
    height: 50px;
}

p span {
    background-color: #86fcd4;
    padding: 0 20px;
}

JS:

var x = 0;
var y = 0;
var z = 0;

function myMoveFunction() {
    document.getElementById("demo").innerHTML = z += 1;
}

function myEnterFunction() {
    document.getElementById("demo2").innerHTML = x += 1;
}

function myOverFunction() {
    document.getElementById("demo3").innerHTML = y += 1;
}
  • onmousemove: se produit chaque fois que le pointeur de la souris est déplacé sur l'élément div.
  • onmouseenter: n'apparaît que lorsque le pointeur de la souris entre dans l'élément div.
  • onmouseover: survient lorsque le pointeur de la souris entre dans l'élément div et ses éléments enfants (p et span).
1
Mourad El Aomari