Keď už hovoríme o DIV prvku, vo vnútri je IMG prvok a SPAN element, netrápte sa, ako sú tieto dva vnútorné prvky rozložené, toto nie je téma, o ktorej chcem hovoriť.
Na dosiahnutie špeciálnych efektov potrebujem použiť udalosti onmouseover a onmouseout od TD, a keď to otestujem, nájdem nasledujúcu situáciu:
Keď sa myš pohybuje v rámci DIV, spustí sa udalosť onmouseover; Potom presuňte myš na IMG alebo SPAN element vo vnútri DIV, určite si nemyslíme, že by sa myš presunula na vonkajšiu stranu DIV, ale zvláštne je, že sa spustí udalosť onmouseout a udalosť onmouseover sa tiež spustí okamžite.
Toto nie je to, čo chcem, takže ako môžem "zablokovať" interferenciu udalostí Javascrip{filtering}t, ktoré prinášajú interné prvky externým prvkom?
Tu sú dve metódy:
1. setTimeOut
Pretože po presune myši na vnútorný prvok a spustí udalosť onmouseout vonkajšieho prvku, onmouseover vonkajšieho prvku sa tiež spustí okamžite, takže stačí odložiť akciu, ktorú udalosť onmouseout vonkajšieho prvku musí vykonať na krátky čas, aby sa spustila, a potom vykonať metódu clearTimeout v udalosti onmouseover, aby sme sa vyhli rušeniu udalosti spôsobenému vnútorným prvkom.
Pozrite si nasledujúci obrázok pre konkrétny proces vykonávania (vertikálna prerušovaná čiara predstavuje čas):
Toto je šikovný prístup, pretože keď sa spustí onmouseout, podstatná metóda sa nevykoná okamžite, ale počká krátky čas. Ak sa udalosť onmouseover spustí okamžite počas tohto času, je v podstate isté, že udalosť onmouseout je spustená kvôli rušeniu vnútorných prvkov, preto použite clearTimeout v udalosti onmouseover, aby ste zabránili vykonaniu oneskorenej metódy.
2. obsahuje
Urobte nasledujúce rozhodnutie pri onmouseover a potom vykonajte telo metódy, keď je výsledok pravdivý:
Urobte nasledujúce hodnotenie pri onmouseout a potom vykonajte telo metódy, keď je výsledok pravdivý:
Tu je vysvetlenie významu týchto dvoch riadkov kódu:
V IE majú všetky HTML prvky metódu contain, ktorá určuje, či aktuálny prvok obsahuje určený prvok. Túto metódu používame na určenie, či je udalosť vonkajšieho prvku spustená vnútorným prvkom, a ak vnútorný prvok spôsobí nežiaducu udalosť, túto udalosť ignorujeme.
event.fromElement ukazuje na prvok, ktorý myš opúšťa, keď sa spustia udalosti onmouseover a onmouseout; event.toElement ukazuje na prvok, do ktorého myš vstúpi pri spustení udalostí onmouseover a onmouseout.
Takže význam týchto dvoch riadkov kódu je:
- Keď sa spustí udalosť onmouseover, určí, či prvok zanechaný myšou je vnútorným prvkom aktuálneho prvku, a ak áno, túto udalosť ignoruje;
- Keď sa spustí udalosť onmouseout, zhodnoťte, či je prvok zadaný myšou vnútorným prvkom aktuálneho prvku, a ak áno, túto udalosť ignorujte;
Týmto spôsobom vnútorný prvok nezasahuje do udalostí onmouseover a onmouseout vonkajšieho prvku.
Problém je však opäť v tom, že ne-IE prehliadače nepodporujú funkciu contain, ale teraz, keď poznáme funkciu contain, môžeme pridať nasledujúci kód, aby sme pridali podporu contain pre ne-IE prehliadače:
Vyššie uvedené metódy nie sú kompatibilné s Firefoxom:
Pointa je jQuery:
jQueryPouži mouseleave namiesto mouseout, takže to, čo bolo uvedené vyššie, sa nestane.
Tiež sa myš bude opakovane spúšťať, stačí použiť mouseenter.
Perfektné riešenie~
|
Zverejnené 17. 12. 2018 14:57:53
|
|
|
|
