Vorbind despre a avea un element DIV, există un element IMG și un element SPAN în interior, nu vă faceți griji despre cum sunt aranjate aceste două elemente interne, nu acesta este punctul pe care vreau să-l discut.
Pentru a obține unele efecte speciale, trebuie să folosesc evenimentele onmouseover și onmouseout ale TD, iar când le testez, voi găsi următoarea situație:
Când mouse-ul se mișcă în interiorul DIV-ului, evenimentul onmouseover este declanșat; Apoi mută mouse-ul în elementul IMG sau SPAN din interiorul DIV-ului, cu siguranță nu credem că mouse-ul s-a mutat în exteriorul DIV-ului, dar ciudat este că evenimentul onmouseout este declanșat, iar evenimentul onmouseover este declanșat imediat.
Asta nu este ceea ce vreau, deci cum pot "bloca" interferența evenimentelor Javascrip{filtering}t aduse de elementele interne către elementele externe?
Iată două metode:
1. setTimeout
Pentru că după ce mouse-ul se deplasează peste elementul interior și declanșează evenimentul onmouseout al elementului exterior, onmouseover-ul elementului exterior va fi de asemenea declanșat imediat, așa că trebuie doar să întârziem acțiunea pe care evenimentul onmouseout al elementului exterior trebuie să o execute pentru o perioadă scurtă de timp pentru a rula, apoi să executăm metoda clearTimeout în evenimentul onmouseover, pentru a evita interferența evenimentului cauzată de elementul intern.
Vă rugăm să consultați următoarea figură pentru procesul specific de execuție (linia punctată verticală reprezintă timpul):
Aceasta este o abordare inteligentă, deoarece atunci când se declanșează onmouseout, metoda substanțială nu este executată imediat, ci așteaptă o perioadă scurtă de timp. Dacă evenimentul onmouseover este declanșat imediat în acest timp, atunci este practic sigur că evenimentul onmouseout este declanșat din cauza interferențelor elementelor interne, așa că folosește clearTimeout în evenimentul onmouseover pentru a preveni executarea metodei întârziate.
2. conține
Fă următoarea judecată când faci onmouseover și apoi execută corpul metodei când rezultatul este adevărat:
Fă următoarea judecată la onmouseout și apoi execută corpul metodei când rezultatul este adevărat:
Iată o explicație a semnificației celor două linii de cod de mai sus:
În IE, toate elementele HTML au o metodă contain care determină dacă elementul curent conține un element specificat. Folosim această metodă pentru a determina dacă un eveniment al unui element exterior este declanșat de un element intern, iar dacă un element intern determină declanșarea unui eveniment nedorit, atunci ignorăm acest eveniment.
event.fromElement indică elementul de unde mouse-ul părăsește când sunt declanșate evenimentele onmouseover și onmouseout; event.toElement indică elementul în care intră mouse-ul când sunt declanșate evenimentele onmouseover și onmouseout.
Așadar, sensul celor două linii de cod de mai sus este:
- Când evenimentul onmouseover este declanșat, acesta determină dacă elementul lăsat de mouse este un element intern al elementului curent și, dacă da, ignoră acest eveniment;
- Când evenimentul onmouseout este declanșat, se judecă dacă elementul introdus de mouse este un element intern al elementului curent și, dacă da, se ignoră acest eveniment;
Astfel, elementul interior nu interferează cu evenimentele onmouseover și onmouseout ale elementului exterior.
Dar problema este din nou că browserele non-IE nu suportă funcția contain, dar acum că știm funcția acesteia, putem adăuga următorul cod pentru a adăuga următorul cod pentru a adăuga suport contain pentru browserele non-IE:
Metodele de mai sus nu sunt compatibile cu Firefox:
Ideea este jQuery:
jQueryFolosește mouseleave în loc de mouseout, astfel încât ceea ce s-a spus mai sus să nu se întâmple.
De asemenea, mouseover-ul va fi declanșat în mod repetat, folosește mouseenter.
Soluție perfectă~
|
Postat pe 17.12.2018 14:57:53
|
|
|
|
