Ha már a DIV elemről beszélünk, van benne egy IMG elem és egy SPAN elem, ne aggódj amiatt, hogyan vannak elhelyezve ezek a két belső elem, ez nem az a pont, amiről szeretnék beszélni.
Speciális effektek eléréséhez a TD onmouseover és onmouseout eseményeit kell használnom, és amikor tesztelem, a következő helyzetet találom:
Amikor az egér a DIV-en belül mozog, az onmouseover esemény aktiválódik; Ezután mozgassuk az egéret az IMG vagy SPAN elemre a DIV-ben, mi biztosan nem gondoljuk, hogy az egér a DIV külső részére mozdult volna, de a furcsa az, hogy az onmouseout esemény aktiválódik, és az onmouseover esemény is azonnal aktiválódik.
Ez nem az, amit szeretnék, szóval hogyan "blokkolhatnám" a belső elemek által előidézett Javascrip{filtering}t események külső elemekhez való beavatkozását?
Íme két módszer:
1. setTimeout
Mivel miután az egér áthalad a belső elem felett és elindítja a külső elem onmouseout eseményét, a külső elem onmouseover eseménye is azonnal aktiválódik, így csak rövid ideig kell késleltetnünk azt az akciót, amit a külső elem onmouseout eseményének végrehajtania kell, és a clearTimeout metódust az onmouseover eseményben végrehajtsuk, hogy elkerüljük a belső elem által okozott eseményinterferenciát.
Kérjük, lásd az alábbi ábrát a konkrét végrehajtási folyamatról (a függőleges szaggatott vonal az időt jelöli):
Ez egy okos megközelítés, mert amikor az onmouseout aktiválódik, a lényegi módszer nem azonnal hajt végre, hanem rövid ideig vár. Ha az onmouseover esemény azonnal aktiválódik ebben az időszakban, akkor gyakorlatilag biztos, hogy az onmouseout esemény belső elemek interferenciája miatt indul el, ezért használj clearTimeoutot az onmouseover eseményben, hogy megakadályozd a késleltetett metódus végrehajtását.
2. tartalmazza
Az onmouseover esetén a következő ítéletet hozzuk, majd akkor hajtsuk végre a módszer testét, amikor az eredmény igaz:
Az onmouseout esetén a következő ítéletet hozzuk, majd akkor hajtsuk végre a módszer testét, ha az eredmény igaz:
Íme egy magyarázat a fenti két kódsor jelentésére:
Az IE-ben minden HTML elemnek van egy tartalmazó metódusa, amely meghatározza, hogy a jelenlegi elem tartalmaz-e egy meghatározott elemet. Ezt a módszert arra használjuk, hogy meghatározzuk, hogy egy külső elem eseményét belső elem indítja-e el, és ha egy belső elem nem kívánt eseményt indít el, akkor figyelmen kívül hagyjuk ezt az eseményt.
event.fromElement arra az elemre mutat, ahol az egér elhagyja az onmouseover és onmouseout eseményeket; event.toElement arra az elemre mutat, amelybe az egér belép, amikor az onmouseover és onmouseout események aktiválódnak.
Tehát a fenti két kódsor jelentése a következő:
- Amikor az onmouseover esemény aktiválódik, meghatározza, hogy az egér által hagyott elem a jelenlegi elem belső eleme-e, és ha igen, figyelmen kívül hagyja ezt az eseményt;
- Amikor az onmouseout esemény aktiválódik, meg kell ítélni, hogy az egér által belépett elem a jelenlegi elem belső eleme-e, és ha igen, akkor figyelmen kívül hagyjuk ezt az eseményt;
Így a belső elem nem zavarja a külső elem onmouseover és onmouseout eseményeit.
De a probléma ismét az, hogy a nem IE böngészők nem támogatják a contain függvényt, de most, hogy tudjuk a contain függvényt, hozzáadhatjuk a következő kódot, hogy add include to support for non-IE böngészők számára:
A fenti módszerek nem kompatibilisek a Firefox-szal:
A lényeg a jQuery:
jQueryHasználj mouseleave-t a mouseout helyett, így a fentiek ne történjenek meg.
Ráadásul a mouseover többször is aktiválódik, csak használd a mouseenter gombot.
Tökéletes megoldás~
|
Közzétéve 2018. 12. 17. 14:57:53
|
|
|
|
