Jquery mouseenter() vs mouseover()

Donc après avoir lu récemment répondu à question je ne sais pas si j'ai vraiment compris la différence entre l' mouseenter() et mouseover(). Le poste des états

MouseOver():

Le feu à l'entrée d'un élément et chaque fois que l'un des mouvements de la souris
se produire à l'intérieur de l'élément.

MouseEnter():

Le feu à l'entrée d'un élément.

Je suis venu avec un violon qui utilise les deux, et ils semblent assez similaires. Quelqu'un peut-il m'expliquer la différence entre les deux ?

J'ai aussi essayé de lire le JQuery, les définitions, 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

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

Quelqu'un peut-il préciser avec un exemple?

InformationsquelleAutor aziz punjani | 2011-09-02
  1. 259

    Vous voyez le problème quand votre cible élément contient les éléments enfants:

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

    À chaque fois que votre souris entre ou sort d'un élément enfant, mouseover est déclenché, mais pas mouseenter.

    JS:

    $('#my_div').bind("mouseover mouseenter", function(e) {
  var el = $("#" + e.type);
  var n = +el.text();
  el.text(++n);
});

    CSS:

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

    HTML:

    <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>

    • court et précis
    • en d'autres termes, plus de = entrée + congé, droit?
    • Pas de. Jouer avec ces deux démos que l' mouseleave de l'événement: jsfiddle.net/ZCWvJ/232 jsfiddle.net/ZCWvJ/233 Si plus de où la même comme entrée + congés payés, puis le comte de plus serait la somme des chiffres pour entrer et sortir.
    • est-il une raison spécifique pour écrire var n = + el.text(); au lieu de var n = el.text();? Je demande juste de la curiosité.
    • Je suis à l'aide de la + opérateur afin de le contraindre à la chaîne renvoyée par el.text() pour un certain nombre. Je n'ai besoin pour? Pas de. Dans ce cas, l'instruction suivante qui utilise n serait également forcer un certain nombre. Donc, pourquoi ai-je l'utiliser? Je ne suis pas sûr... c'était il y a 2 ans. C'est une bonne habitude. Il rend mon intention explicite. Probablement j'ai d'abord eu n + 1 avant je l'ai enregistré, mais a décidé de rétrécir mon code à 2 caractères et il suffit d'utiliser ++n. n + 1 serait pas forcer n pour un certain nombre, mais plutôt de contraindre 1 à une chaîne résultant en sortie de, par exemple,0111111.
    • merci pour l'explication détaillée de votre voyage dans l'esprit.
    • Bon résumé, mais une légère amélioration: "ou les feuilles d'un élément enfant" doit être "ou les feuilles d'un élément enfant, étant donné qu'il y a un écart entre l'enfant et le parent. votre violon a un margin/padding, et donc c'est vrai qu'à chaque fois que vous quittez l'enfant de l'élément vous obtenez un événement mouseover, mais l'essayer sans rembourrage/marges, et vous n'obtiendrez pas ce cas.
    • Il est intéressant de noter que le même comportement peut être observé avec mouseout vs mouseleave. L'ancien déclencheurs sur les éléments d'enfant, ce dernier n'a pas. Voir: jsfiddle.net/ZCWvJ/1509

    InformationsquelleAutor gilly3
  2. 27

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

    • mouseenter
    • mouseover
    • mouseout
    • mouseleave

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

    • L'exemple est assez cool, mais vous avez besoin de structurer votre réponse un peu plus pour être upvoted. Rappelez-vous que vous essayez de répondre à une question... si vous n'avez que le lien peut-être un commentaire serait plus approprié. Si vous ne pouvez pas encore de commentaires en raison de la réputation, du gain de certains et de le faire plus tard.
    • En fait, j'aime vraiment cette réponse. Le demandeur a déjà donné les définitions de la souris et mouseenter. Ils demandaient un exemple, et cet exemple montre comment ils fonctionnent beaucoup mieux que les autres exemples ici.
    • gilly3 réponse a une faille (voir mon commentaire). Même si n'est pas structuré et bien, cette réponse de points pour une meilleure ressource.
    InformationsquelleAutor Christopher
  3. 11

    Bien qu'ils fonctionnent de la même manière, cependant, les mouseenter cas seulement se déclenche lorsque le pointeur de la souris entre l'élément sélectionné. Le mouseover événement est déclenché si le pointeur de la souris entre dans aucun des éléments d'enfant ainsi.

    InformationsquelleAutor ErickBest
  4. 4

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

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

    ... passage de la souris déclenche lorsque le pointeur se déplace dans l'enfant de l'élément de
    eh bien, tout mouseenter se déclenche seulement lorsque le pointeur se déplace dans la
    lié à l'élément.

    InformationsquelleAutor Willem
  5. 4

    La mouseenter événement diffère de mouseover dans la façon dont il gère de remontée d'événements. Le mouseenter cas, seules les déclenche de son maître lorsque le souris pénètre dans l'élément il est lié à la, pas un descendant.
    Reporter: https://api.jquery.com/mouseenter/

    La mouseleave événement diffère de mouseout dans la façon dont il gère de remontée d'événements. Le mouseleave cas, seules les déclenche de son maître lorsque le souris quitte l'élément il est lié à la, pas un descendant.
    Reporter: https://api.jquery.com/mouseleave/

    InformationsquelleAutor user2330678
  6. 1

    Cet exemple illustre la différence entre les mousemove, mouseenter et mouseover événements:

    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ée au-dessus de l'élément div.
    • onmouseenter : se produit uniquement lorsque le pointeur de la souris entre dans l'élément div.
    • onmouseover : se produit lorsque le pointeur de la souris entre dans l'élément div,
      et de ses éléments enfant (p et span).
    • exemple utile merci
    InformationsquelleAutor Mourad El Aomari