¿Cuál es la diferencia entre jQuery's mouseout() y mouseleave()?

Question

¿Cuál es la diferencia entre jQuery's mouseout() y mouseleave()?

Answer 1

El evento mouseleave difiere del mouseout en la forma en que maneja el evento de borboteo. Si se utilizó mouseout en este ejemplo, cuando el puntero del mouse se movió fuera del elemento interno, el controlador se activaría. Esto generalmente es un comportamiento indeseable. El evento mouseleave, por otro lado, solo activa su controlador cuando el mouse deja el elemento al que está vinculado, no un descendiente. Por lo tanto, en este ejemplo, el controlador se activa cuando el mouse deja el elemento externo, pero no el elemento interno.

Fuente: http://api.jquery.com/mouseleave/

Sorprendentemente hay un montón de resultados @http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=jquery+mouseleave+mouseout+difference

Answer 2

API jQuery doc:

mouseout

Este tipo de evento puede causar muchos dolores de cabeza debido a eventos burbujeando Por ejemplo, cuando el puntero del mouse se mueve fuera del elemento interno en este ejemplo, se enviará un evento mouseout a eso, luego se filtrará a Outer. Esto puede desencadenar el controlador de mouseout encuadernado en momentos inoportunos. Consulte la discusión sobre .mouseleave() para una alternativa útil.

Así mouseleave es un evento personalizado, que fue diseñado por la razón anterior.

http://api.jquery.com/mouseleave/

Answer 3

No puede haber momentos en los que mouseout es una mejor opción que mouseleave.

Por ejemplo, supongamos que ha creado una información sobre herramientas que desea mostrar junto a un elemento en mouseenter. Utiliza setTimeout para evitar que la información sobre herramientas aparezca de forma instantánea. Borre el tiempo de espera en mouseleave usando clearTimeout, de modo que si el mouse sale, la información sobre herramientas no se mostrará. Esto funcionará el 99% del tiempo.

Pero ahora supongamos que el elemento tiene un texto de ayuda unido a un botón con un evento click, y también vamos a suponer este botón solicita al usuario, ya sea con una caja confirm o alert. El usuario hace clic en el botón y los incendios alert. El usuario lo presionó lo suficientemente rápido como para que tu información sobre herramientas no tuviese la oportunidad de aparecer (hasta ahora todo bien).

El usuario presiona el botón OK de la casilla alert, y el mouse deja el elemento. Pero como la página del navegador ahora está bloqueada, no se activará javascript hasta que se presione el botón Aceptar, lo que significa que su evento mouseleaveNO DISPARARÁ. Después de que el usuario presione OK, aparecerá la información sobre herramientas (que no es lo que usted quería).

El uso de mouseout en este caso sería la solución adecuada porque se disparará.