Qual è la differenza tra jQuery’s mouseout () e mouseleave ()?

Qual è la differenza tra jQuery’s mouseout () e mouseleave ()?

L’evento mouseleave differisce da mouseout nel modo in cui gestisce il bubbling degli eventi. Se in questo esempio sono stati utilizzati mouseout, quando il puntatore del mouse si spostava fuori dall’elemento Inner, il gestore veniva triggersto. Questo è di solito un comportamento indesiderato. L’evento di mouseleave, d’altra parte, fa scattare il suo gestore solo quando il mouse lascia l’elemento a cui è legato, non un discendente. In questo esempio, il gestore viene triggersto quando il mouse lascia l’elemento Esterno, ma non l’elemento Interno.

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

Ci possono essere momentjs in cui il mouseout è una scelta migliore rispetto al mouseleave .

Ad esempio, supponiamo di aver creato un suggerimento che si desidera visualizzare accanto a un elemento su mouseenter . Usa setTimeout per impedire che il suggerimento venga immediatamente visualizzato. Si cancella il timeout su mouseleave usando clearTimeout quindi se il mouse lascia il tooltip non verrà visualizzato. Questo funzionerà il 99% delle volte.

Ma ora diciamo che l’elemento a cui è associato un tooltip è un pulsante con un evento click , e supponiamo anche che questo pulsante richieda all’utente una casella di confirm o di alert . L’utente fa clic sul pulsante e l’ alert triggers. L’utente lo ha premuto abbastanza velocemente che il tuo suggerimento non ha avuto la possibilità di apparire (finora così buono).

L’utente preme il pulsante OK della casella di alert e il mouse lascia l’elemento. Ma dal momento che la pagina del browser è ora in uno stato bloccato, nessun javascript verrà triggersto fino a quando non verrà premuto il pulsante OK, il che significa che il tuo evento ” mouseleaveNON FUOCO . Dopo che l’utente ha premuto OK, verrà visualizzata la descrizione comando (che non è ciò che volevi).

L’utilizzo di mouseout in questo caso sarebbe la soluzione appropriata perché si mouseout .

Documento API jQuery:

mouseout

Questo tipo di evento può causare molti mal di testa a causa del bubbling degli eventi. Ad esempio, quando il puntatore del mouse si sposta fuori dall’elemento Inner in questo esempio, verrà inviato un evento mouseout a quel punto, quindi passerà a Outer. Questo può triggersre il gestore del mouseout associato in tempi inopportuni. Vedi la discussione per .mouseleave () per un’alternativa utile.

Quindi mouseleave è un evento personalizzato, che è stato progettato a causa della ragione di cui sopra.

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