Over het hebben van een DIV-element gesproken, er zit een IMG-element en een SPAN-element binnenin, maak je geen zorgen over hoe deze twee interne elementen zijn ingedeeld, dit is niet het punt waar ik het over wil hebben.
Om wat speciale effecten te bereiken, moet ik TD's onmouseover- en onmouseout-events gebruiken, en als ik het test, vind ik de volgende situatie:
Wanneer de muis zich in de DIV beweegt, wordt het onmouseover-event geactiveerd; Verplaats dan de muis naar het IMG- of SPAN-element binnen de DIV, we denken zeker niet dat de muis naar buiten de DIV is verplaatst, maar het vreemde is dat het onmouseout-event wordt geactiveerd, en het onmouseover-event wordt ook direct geactiveerd.
Dit is niet wat ik wil, dus hoe kan ik de interferentie van Javascrip{filtering}t-gebeurtenissen die door interne elementen naar externe elementen worden gebracht, "blokkeren"?
Hier zijn twee methoden:
1. setTime-out
Omdat nadat de muis over het binnenste element beweegt en het onmouseout-event van het buitenste element activeert, de onmouseover van het buitenste element ook direct wordt geactiveerd, dus we hoeven alleen de actie die het onmouseout-event van het buitenste element uit te voeren voor een korte periode uit te stellen, en vervolgens de clearTimeout-methode uit te voeren in het onmouseover-event, om zo de gebeurtenisinterferentie veroorzaakt door het interne element te vermijden.
Zie de volgende figuur voor het specifieke uitvoeringsproces (verticale stippellijn geeft tijd aan):
Dit is een slimme aanpak, want wanneer onmouseout wordt geactiveerd, wordt de substantiële methode niet direct uitgevoerd, maar moet deze korte tijd wachten. Als het onmouseover-event direct wordt geactiveerd tijdens deze tijd, is het vrijwel zeker dat het onmouseout-evenement wordt geactiveerd door interferentie van interne elementen, dus gebruik clearTimeout in het onmouseover-evenement om te voorkomen dat de vertraagde methode wordt uitgevoerd.
2. bevat
Maak het volgende oordeel wanneer je onmouseover bent, en voer vervolgens de methodebody uit wanneer het resultaat waar is:
Maak het volgende oordeel bij onmouseout, en voer vervolgens de methodebody uit wanneer het resultaat waar is:
Hier volgt een uitleg van de betekenis van bovenstaande twee regels code:
In IE hebben alle HTML-elementen een containe-methode die bepaalt of het huidige element een gespecificeerd element bevat. We gebruiken deze methode om te bepalen of een gebeurtenis van een buitenelement wordt getriggerd door een intern element, en als een intern element een ongewenst evenement veroorzaakt, negeren we dit evenement.
event.fromElement wijst naar het element waar de muis vertrekt wanneer de onmouseover- en onmouseout-gebeurtenissen worden geactiveerd; event.toElement wijst naar het element dat de muis binnenkomt wanneer de onmouseover- en onmouseout-gebeurtenissen worden geactiveerd.
Dus de betekenis van bovenstaande twee regels code is:
- Wanneer het onmouseover-event wordt geactiveerd, bepaalt het of het element dat door de muis is achtergelaten een intern element van het huidige element is, en zo ja, negeert het dit evenement;
- Wanneer het onmouseout-event wordt geactiveerd, beoordeel dan of het element dat door de muis wordt ingevoerd een intern element van het huidige element is, en zo ja, negeer dit event;
Op deze manier interfereert het binnenste element niet met de onmouseover- en onmouseout-gebeurtenissen van het buitenste element.
Maar het probleem is opnieuw dat niet-IE browsers de containe-functie niet ondersteunen, maar nu we de functie van de containe-functie kennen, kunnen we de volgende code toevoegen om de volgende code toe te voegen om contain-ondersteuning voor niet-IE-browsers toe te voegen:
De bovenstaande methoden zijn niet compatibel met Firefox:
Het punt is jQuery:
jQueryGebruik mouseleave in plaats van mouseout, zodat wat hierboven gezegd is niet gebeurt.
Ook wordt de mouseover herhaaldelijk geactiveerd, gebruik gewoon mouseenter in plaats daarvan.
Perfecte oplossing~
|
Geplaatst op 17-12-2018 14:57:53
|
|
|
|
