Risposte:
L'evento mouseleave differisce da mouseout nel modo in cui gestisce il bubbling degli eventi. Se il mouseout fosse usato in questo esempio, quando il puntatore del mouse si spostava fuori dall'elemento Inner, il gestore sarebbe attivato. Questo di solito è un comportamento indesiderato. L'evento mouseleave, d'altra parte, attiva il suo gestore solo quando il mouse lascia l'elemento a cui è associato, non un discendente. Quindi, in questo esempio, il gestore viene attivato quando il mouse lascia l'elemento Outer, ma non l'elemento Inner.
Ci possono essere momenti in cui mouseoutè una scelta migliore di mouseleave.
Ad esempio, supponiamo di aver creato una descrizione comando su cui desideri visualizzare accanto a un elemento mouseenter. Si utilizza setTimeoutper evitare che il suggerimento venga visualizzato immediatamente. Si cancella il timeout durante l' mouseleaveutilizzo, clearTimeoutquindi se il mouse esce il suggerimento non verrà visualizzato. Questo funzionerà il 99% delle volte.
Ma ora supponiamo che l'elemento a cui è associato un suggerimento sia un pulsante con un clickevento e supponiamo anche che questo pulsante richieda all'utente una casella confirmo alert. L'utente fa clic sul pulsante e si alertaccende. L'utente lo ha premuto abbastanza velocemente che il tuo tooltip non ha avuto la possibilità di apparire (finora tutto bene).
L'utente preme il alertpulsante della casella OK e il mouse abbandona l'elemento. Ma poiché la pagina del browser è ora in uno stato bloccato, nessun javascript si attiverà fino a quando non verrà premuto il pulsante OK, il che significa che il tuo mouseleaveevento NON SI FARÀ . Dopo che l'utente ha premuto OK, verrà visualizzato il suggerimento (che non è quello che volevi).
L'utilizzo mouseoutin questo caso sarebbe la soluzione appropriata perché si attiverà.
mouseoutin quel caso sparerà? Il browser non sarebbe ancora bloccato per mouseout?
Documento API jQuery:
mouseout
Questo tipo di evento può causare molti mal di testa a causa del gorgoglio degli eventi. Ad esempio, quando il puntatore del mouse si sposta fuori dall'elemento Inner in questo esempio, verrà inviato un evento mouseout a quello, quindi scorre fino a Outer. Ciò può attivare il gestore del mouseout associato in momenti inopportuni. Vedere la discussione su .mouseleave () per un'alternativa utile.
Quindi mouseleaveè un evento personalizzato, che è stato progettato per il motivo di cui sopra.
Event Mouseout si attiverà quando il mouse lascia l'elemento selezionato e anche quando il mouse lascia anche gli elementi figlio.
Evento L'elemento Mouseleave si attiverà quando il puntatore lascerà solo l'elemento selezionato.
Riferimento: W3School