Jquery mouseenter () vs mouseover ()

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

MouseOver ():

Se déclenche 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 s’il vous plaît m’expliquer la différence entre les deux?

J’ai également essayé de lire les définitions 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?

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 ou quitte un élément enfant, le mouseover est déclenché, mais pas mouseenter .

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

  • centre de souris
  • survol de la souris
  • mouseout
  • mouseleave

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

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

Voir l’exemple de code et la démo en 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, alors que mouseenter ne se déclenche que lorsque le pointeur se déplace dans l’élément lié.

L’événement mouseenter diffère du survol de la souris dans la manière dont il gère la diffusion des événements. L’événement mouseenter ne déclenche son gestionnaire que lorsque la souris entre dans l’élément auquel elle est liée, et non un descendant . Se référer à: https://api.jquery.com/mouseenter/

L’événement mouseleave diffère de mouseout dans la manière dont il gère la diffusion des événements. L’événement mouseleave ne déclenche son gestionnaire que lorsque la souris quitte l’élément auquel elle est liée, et non un descendant . Se référer à: https://api.jquery.com/mouseleave/

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

https://jsfiddle.net/z8g613yd/

HTML:

 

onmousemove:
Mouse over me!

onmouseenter:
Mouse over me!

onmouseover:
Mouse over me!

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 : 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 ses éléments enfants (p et span).