Když už mluvíme o DIV prvku, uvnitř je IMG a SPAN prvek, nedělejte si starosti, jak jsou tyto dva vnitřní prvky uspořádány, to není téma, o kterém chci mluvit.
Abych dosáhl speciálních efektů, potřebuji použít události onmouseover a onmouseout od TD, a když to otestuji, najdu následující situaci:
Když se myš pohybuje uvnitř DIV, spustí se událost onmouseover; Pak přesuneme myš do elementu IMG nebo SPAN uvnitř DIV, rozhodně si nemyslíme, že by se myš přesunula ven z DIV, ale zvláštní je, že událost onmouseout se spustí a událost onmouseover se také spustí okamžitě.
Tohle není to, co chci, takže jak mohu "zablokovat" interferenci událostí Javascrip{filtering}t, které přinášejí interní prvky externím prvkům?
Zde jsou dvě metody:
1. setTimeOut
Protože poté, co myš přejede přes vnitřní prvek a spustí onmouseout událost vnějšího prvku, se také okamžitě spustí onmouseover vnějšího prvku, takže stačí odložit akci, kterou onmouseout event vnějšího prvku musí na krátkou dobu spustit, a poté spustit metodu clearTimeout v onmouseover eventu, abychom se vyhnuli rušení události způsobenému vnitřním prvkem.
Viz následující obrázek pro konkrétní proces provádění (vertikální tečkovaná čára představuje čas):
Je to chytrý přístup, protože když se spustí onmouseout, podstatná metoda se nespustí okamžitě, ale čeká krátkou dobu. Pokud je událost onmouseover spuštěna okamžitě během této doby, je v podstatě jisté, že událost onmouseout je spuštěna kvůli interferenci vnitřních prvků, proto použijte clearTimeout v události onmouseover, abyste zabránili spuštění zpožděné metody.
2. obsahuje
Při onmouseover provedete následující úsudek a poté provedete tělo metody, když je výsledek pravdivý:
Při onmouseout provedete následující úsudek a poté provedete tělo metody, když je výsledek pravdivý:
Zde je vysvětlení významu výše uvedených dvou řádků kódu:
V IE mají všechny HTML prvky metodu contain, která určuje, zda aktuální prvek obsahuje konkrétní prvek. Tuto metodu používáme k určení, zda je událost vnějšího prvku vyvolána vnitřním prvkem, a pokud vnitřní prvek způsobí nežádoucí událost, tuto událost ignorujeme.
event.fromElement ukazuje na prvek, ze kterého myš opouští události onmouseover a onmouseout; event.toElement ukazuje na prvek, do kterého myš vstoupí při spuštění událostí onmouseover a onmouseout.
Takže význam výše uvedených dvou řádků kódu je:
- Když je událost onmouseover spuštěna, určí, zda prvek zanechaný myší je vnitřním prvkem aktuálního prvku, a pokud ano, tuto událost ignoruje;
- Když je spuštěna událost onmouseout, posoudte, zda prvek zadaný myší je vnitřním prvkem aktuálního prvku, a pokud ano, tuto událost ignorujte;
Tímto způsobem vnitřní prvek nezasahuje do událostí onmouseover a onmouseout vnějšího prvku.
Problém je však opět v tom, že prohlížeče mimo IE nepodporují funkci contain, ale nyní, když známe funkci contain, můžeme přidat následující kód, abychom přidali podporu contain pro prohlížeče bez IE:
Výše uvedené metody nejsou kompatibilní s Firefoxem:
Jde o jQuery:
jQueryPoužívejte mouse leave místo mouseout, takže to, co bylo výše uvedeno, se nestane.
Také se myš bude opakovaně spouštět, stačí použít mouseenter.
Perfektní řešení~
|
Zveřejněno 17.12.2018 14:57:53
|
|
|
|
