Jquery mouseenter () vs mouseover ()

Quindi, dopo aver letto una domanda a cui ho risposto di recente, non sono chiaro se capisco davvero la differenza tra mouseenter() e mouseover() . Il post afferma

MouseOver ():

Spara quando si entra in un elemento e ogni volta che si verificano movimenti del mouse all’interno dell’elemento.

MouseEnter ():

Sparerà quando si entra in un elemento.

Mi sono inventato un violino che usa entrambi e sembrano abbastanza simili. Qualcuno può spiegarmi la differenza tra i due?

Ho anche provato a leggere le definizioni di JQuery, entrambi dicono la stessa cosa.

L’evento mouseover viene inviato a un elemento quando il puntatore del mouse entra nell’elemento

L’evento mouseenter viene inviato a un elemento quando il puntatore del mouse entra nell’elemento.

Qualcuno può chiarire con un esempio?

Si vede il comportamento quando l’elemento di destinazione contiene elementi figlio:

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

Ogni volta che il mouse entra o esce da un elemento figlio, viene triggersto il mouseover , ma non il mouseenter .

Questo è uno dei migliori esempi che ho trovato di:

  • MouseEnter
  • mouseover
  • mouseout
  • mouseLeave

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

Sebbene funzionino allo stesso modo, tuttavia, l’evento mouseenter si triggers solo quando il puntatore del mouse entra nell’elemento selezionato . L’evento mouseover viene triggersto se un puntatore del mouse immette anche qualsiasi elemento figlio .

Vedi il codice di esempio e la demo nella parte inferiore della pagina di documentazione di jquery:

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

… mouseover si triggers quando il puntatore si sposta anche nell’elemento figlio, mentre mouseenter si triggers solo quando il puntatore si sposta nell’elemento associato.

L’evento mouseenter differisce dal passaggio del mouse nel modo in cui gestisce il bubbling degli eventi . L’evento mouseenter , triggers il suo gestore solo quando il mouse entra nell’elemento a cui è associato, non in un discendente . Fare riferimento a: https://api.jquery.com/mouseenter/

L’evento mouseleave differisce da mouseout nel modo in cui gestisce il bubbling degli eventi . L’evento mouseleave , triggers il suo gestore solo quando il mouse lascia l’elemento a cui è associato, non un discendente . Riferisca: https://api.jquery.com/mouseleave/

Questo esempio dimostra la differenza tra gli eventi mousemove , mouseenter e 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 : si verifica ogni volta che il puntatore del mouse viene spostato sull’elemento div.
  • onmouseenter : si verifica solo quando il puntatore del mouse entra nell’elemento div.
  • onmouseover : si verifica quando il puntatore del mouse entra nell’elemento div e i relativi elementi figlio (p e span).