Når vi taler om at have et DIV-element, er der et IMG-element og et SPAN-element indeni, så bekymr dig ikke om, hvordan disse to interne elementer er opstillet, det er ikke det punkt, jeg vil diskutere.
For at opnå nogle specialeffekter skal jeg bruge TD's onmouseover og onmouseout events, og når jeg tester det, vil jeg finde følgende situation:
Når musen bevæger sig inde i DIV'en, udløses onmouseover-begivenheden; Flytt så musen til IMG- eller SPAN-elementet inde i DIV'en, vi tror bestemt ikke, at musen er flyttet til ydersiden af DIV'en, men det mærkelige er, at onmouseout-begivenheden bliver udløst, og onmouseover-begivenheden bliver også udløst med det samme.
Det er ikke det, jeg ønsker, så hvordan kan jeg "blokere" interferensen fra Javascrip{filtering}t-begivenheder, som interne elementer bringer til eksterne elementer?
Her er to metoder:
1. setTimeout
For efter musen bevæger sig over det indre element og udløser onmouseout-begivenheden for det ydre element, vil onmouseoveren af det ydre element også blive udløst med det samme, så vi behøver kun at forsinke den handling, som onmouseout-begivenheden for det ydre element skal udføre, i en kort periode for at køre, og derefter udføre clearTimeout-metoden i onmouseover-begivenheden for at undgå hændelsesinterferens forårsaget af det interne element.
Se venligst følgende figur for den specifikke udførelsesproces (vertikal stiplet linje repræsenterer tid):
Dette er en smart tilgang, fordi når onmouseout udløses, udføres den substantive metode ikke straks, men venter i en kort periode. Hvis onmouseover-hændelsen udløses straks i denne periode, er det stort set sikkert, at onmouseout-begivenheden udløses på grund af interferens fra interne elementer, så brug clearTimeout i onmouseover-begivenheden for at forhindre, at den forsinkede metode udføres.
2. indeholder
Foretag følgende vurdering, når du overfører med musemuse, og udfør derefter metodekroppen, når resultatet er sandt:
Foretag følgende vurdering, når du onmouseout, og udfør derefter metodekroppen, når resultatet er sandt:
Her er en forklaring på betydningen af de to ovenstående kodelinjer:
I IE har alle HTML-elementer en containe-metode, der bestemmer, om det aktuelle element indeholder et specificeret element. Vi bruger denne metode til at afgøre, om en hændelse for et ydre element udløses af et internt element, og hvis et internt element forårsager en uønsket begivenhed, ignorerer vi denne begivenhed.
event.fromElement peger på det element, hvor musen forlader det, når onmouseover- og onmouseout-begivenhederne udløses; event.toElement peger på det element, musen går ind i, når onmouseover- og onmouseout-begivenhederne udløses.
Så betydningen af de to ovenstående linjer kode er:
- Når onmouseover-hændelsen udløses, afgøres det, om det element, musen efterlader, er et internt element i det aktuelle element, og hvis det er tilfældet, ignorerer den denne begivenhed;
- Når onmouseout-hændelsen udløses, vurder om det element, musen indtaster, er et internt element i det aktuelle element, og hvis ja, ignoreres denne begivenhed;
På denne måde forstyrrer det indre element ikke onmouseover- og onmouseout-begivenhederne for det ydre element.
Men problemet er igen, at ikke-IE browsere ikke understøtter contain funktionen, men nu hvor vi kender funktionen af containe-funktionen, kan vi tilføje følgende kode for at tilføje følgende kode til at tilføje contain support for ikke-IE browsere:
Ovenstående metoder er ikke kompatible med Firefox:
Pointen er jQuery:
jQueryBrug mouseleave i stedet for mouseout, så det, der er sagt ovenfor, ikke sker.
Desuden vil mouseoveren blive aktiveret gentagne gange, brug bare mouseenter i stedet.
Perfekt løsning~
|
Opslået på 17/12/2018 14.57.53
|
|
|
|
