¿Cuál es la diferencia entre los eventos mouseover y mouseenter?


153

Siempre he usado el mouseoverevento, pero mientras leía la documentación de jQuery que encontré mouseenter. Parecen funcionar exactamente igual.

¿Hay alguna diferencia entre los dos? De ser así, ¿cuándo debo usarlos?
(También se aplica para mouseoutvs mouseleave).

Respuestas:


118

Puede probar el siguiente ejemplo desde la página de jQuery doc . Es una pequeña demostración interactiva que lo deja muy claro y que puede verlo usted mismo.

En resumen, notará que se produce un evento de mouse sobre un elemento cuando está sobre él, proveniente de su elemento hijo O padre, pero un evento de mouse enter solo ocurre cuando el mouse se mueve desde fuera de este elemento a este elemento.

O como mouseover()dicen los documentos :

[ .mouseover()] puede causar muchos dolores de cabeza debido al burbujeo del evento. Por ejemplo, cuando el puntero del mouse se mueve sobre el elemento Interno en este ejemplo, se enviará un evento mouseover a ese, luego se deslizará hacia Outer. Esto puede activar nuestro controlador de mouseover enlazado en momentos inoportunos. Vea la discusión .mouseenter()para una alternativa útil.


40
No es cierto que mouseenter"solo ocurre cuando el mouse se mueve del elemento padre al elemento". El evento ocurre cuando el mouse cambia de estar fuera del elemento a dentro de él. No importa de qué elemento proviene el mouse. Es cierto que el mouse a menudo vendrá del padre, pero no siempre. Por ejemplo, si el padre no tiene relleno o borde, entonces el mouse podría ingresar directamente desde el abuelo, y mouseentertodavía disparará. De hecho, incluso puede ingresar al elemento desde fuera de la ventana gráfica (si el elemento está justo en el borde) y el evento aún se dispara.
callum

2
DEMO es la mejor explicación;)
Luckylooke

de verdad, solo juega con la demo.
Kevin Wheeler


4

Como suele ser cierto con preguntas como estas, Quirksmode tiene la mejor respuesta .

Me imagino que, debido a que uno de los objetivos de jQuery es hacer que las cosas sean agnósticas para el navegador, el uso de cualquier nombre de evento desencadenará el mismo comportamiento. Editar: gracias a otras publicaciones, ahora veo que este no es el caso


0
$(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);})
 });


si su elemento no tiene elementos secundarios, pero si el elemento tiene elementos secundarios, entonces los pares se comportan de manera bastante diferente. En pocas palabras, si pasa el mouse a un elemento y luego a su elemento secundario, se activará mouseover / mouseout, mientras que solo mouseenter se disparará ya que su mouse aún está técnicamente dentro del elemento.
navegado el
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.