Respuestas:
El evento mouseleave difiere del mouseout en la forma en que maneja la propagación de eventos. Si se usara mouseout en este ejemplo, cuando el puntero del mouse se moviera fuera del elemento Inner, el controlador se activará. Este suele ser un comportamiento indeseable. El evento mouseleave, por otro lado, solo activa su controlador cuando el mouse abandona el elemento al que está vinculado, no un descendiente. Entonces, en este ejemplo, el controlador se activa cuando el mouse abandona el elemento externo, pero no el elemento interno.
Puede haber ocasiones en las que mouseoutsea una mejor opción que mouseleave.
Por ejemplo, supongamos que ha creado una información sobre herramientas que desea que se muestre junto a un elemento mouseenter. Se usa setTimeoutpara evitar que la información sobre herramientas aparezca instantáneamente. Elimina el tiempo de espera al mouseleaveusarlo, clearTimeoutpor lo que si el mouse sale, la información sobre herramientas no se mostrará. Esto funcionará el 99% del tiempo.
Pero ahora digamos que el elemento al que tiene una información sobre herramientas adjunta es un botón con un clickevento, y también supongamos que este botón solicita al usuario un cuadro confirmo un alertcuadro. El usuario hace clic en el botón y se alertdispara. El usuario lo presionó lo suficientemente rápido como para que su información sobre herramientas no tuviera la oportunidad de aparecer (hasta ahora todo bien).
El usuario presiona el alertbotón Aceptar del cuadro y el mouse abandona el elemento. Pero dado que la página del navegador está ahora en un estado bloqueado, no se activará ningún javascript hasta que se presione el botón Aceptar, lo que significa que su mouseleaveevento NO SE DISPARARÁ . Después de que el usuario presione Aceptar, aparecerá la información sobre herramientas (que no es lo que deseaba).
Usar mouseouten este caso sería la solución adecuada porque se disparará.
mouseouten ese caso disparará? ¿No estaría el navegador bloqueado todavía mouseout?
Documento de la API de jQuery:
mouseout
Este tipo de evento puede causar muchos dolores de cabeza debido a la propagación de eventos. Por ejemplo, cuando el puntero del mouse se mueve fuera del elemento Inner en este ejemplo, se enviará un evento de mouseout a ese elemento y luego se filtrará hasta Outer. Esto puede activar el controlador de mouseout vinculado en momentos inoportunos. Vea la discusión de .mouseleave () para una alternativa útil.
También lo mouseleavees un evento personalizado, que fue diseñado por la razón anterior.
Event Mouseout se activará cuando el mouse abandone el elemento seleccionado y también cuando el mouse deje sus elementos secundarios.
Evento El elemento Mouseleave se activará cuando el puntero deje solo el elemento seleccionado.
Referencia: W3School