Parlando di avere un elemento DIV, all'interno ci sono un elemento IMG e un elemento SPAN, non preoccuparti di come sono disposti questi due elementi interni, non è questo il punto di cui voglio parlare.
Per ottenere alcuni effetti speciali, devo usare gli eventi onmouseover e onmouseout di TD, e quando li testerò, troverò la seguente situazione:
Quando il mouse si muove all'interno del DIV, viene attivato l'evento onmouseover; Poi sposta il mouse all'elemento IMG o SPAN all'interno del DIV, sicuramente non pensiamo che il mouse si sia spostato all'esterno del DIV, ma la cosa strana è che l'evento onmouseout viene attivato, e anche l'evento onmouseover viene attivato immediatamente.
Non è questo ciò che voglio, quindi come posso "bloccare" l'interferenza degli eventi Javascrip{filtering}t portati dagli elementi interni agli elementi esterni?
Ecco due metodi:
1. setTimeout
Perché dopo che il mouse si muove sull'elemento interno e attiva l'evento onmouseout dell'elemento esterno, anche l'onmouseover dell'elemento esterno verrà attivato immediatamente, quindi dobbiamo solo ritardare l'azione che l'evento onmouseout dell'elemento esterno deve eseguire per un breve periodo di tempo per essere eseguita, e poi eseguire il metodo clearTimeout nell'evento onmouseover, per evitare l'interferenza causata dall'elemento interno.
Si veda la seguente figura per il processo di esecuzione specifico (la linea tratteggiata verticale rappresenta il tempo):
Questo è un approccio intelligente, perché quando si attiva onmouseout, il metodo sostanziale non viene eseguito immediatamente, ma attende per un breve periodo di tempo. Se l'evento onmouseover viene attivato immediatamente durante questo tempo, è sostanzialmente certo che l'evento onmouseout venga attivato a causa di interferenze da elementi interni, quindi usa clearTimeout nell'evento onmouseover per impedire l'esecuzione del metodo ritardato.
2. contiene
Fai il seguente giudizio durante l'onmouseover, e poi esegui il corpo del metodo quando il risultato è vero:
Fai il seguente giudizio quando si usa il mouseout, e poi esegue il corpo del metodo quando il risultato è vero:
Ecco una spiegazione del significato delle due righe di codice sopra elencate:
In IE, tutti gli elementi HTML hanno un metodo contain che determina se l'elemento corrente contiene un elemento specificato. Usiamo questo metodo per determinare se un evento di un elemento esterno è attivato da un elemento interno e, se un elemento interno provoca un evento indesiderato, allora ignoriamo questo evento.
event.fromElement indica l'elemento da cui il mouse esce quando vengono attivati gli eventi onmouseover e onmouseout; event.toElement indica l'elemento in cui il mouse entra quando vengono attivati gli eventi onmouseover e onmouseout.
Quindi il significato delle due righe di codice sopra è il seguente:
- Quando viene attivato l'evento onmouseover, determina se l'elemento lasciato dal mouse è un elemento interno dell'elemento corrente e, in tal caso, ignora questo evento;
- Quando viene attivato l'evento onmouseout, si valuta se l'elemento inserito dal mouse è un elemento interno dell'elemento corrente e, in tal caso, ignora questo evento;
In questo modo, l'elemento interno non interferisce con gli eventi onmouseover e onmouseout dell'elemento esterno.
Ma il problema è che i browser non-IE non supportano la funzione contain, ma ora che conosciamo la funzione contain, possiamo aggiungere il seguente codice per aggiungere il supporto al contain per browser non IE:
I metodi sopra descritti non sono compatibili con Firefox:
Il punto è jQuery:
jQueryUsa mouseleave invece di mouseout, così che quanto detto sopra non accada.
Inoltre, il mouseover verrà attivato ripetutamente, usa semplicemente mouseenter.
Soluzione perfetta~
|
Pubblicato su 17/12/2018 14:57:53
|
|
|
|
