Når vi snakker om å ha et DIV-element, finnes det et IMG-element og et SPAN-element inni, ikke bekymre deg for hvordan disse to interne elementene er lagt opp, dette er ikke poenget jeg vil diskutere.
For å oppnå noen spesialeffekter må jeg bruke TDs onmouseover- og onmouseout-hendelser, og når jeg tester det, vil jeg finne følgende situasjon:
Når musen beveger seg inne i DIV-en, utløses onmouseover-hendelsen; Flytt så musen til IMG- eller SPAN-elementet inne i DIV-en, vi tror definitivt ikke at musen har flyttet seg til utsiden av DIV-en, men det merkelige er at onmouseout-hendelsen utløses, og onmouseover-hendelsen utløses også umiddelbart.
Dette er ikke det jeg ønsker, så hvordan kan jeg «blokkere» interferensen fra Javascrip{filtering}t-hendelser brakt av interne elementer til eksterne elementer?
Her er to metoder:
1. setTimeout
Fordi etter at musen beveger seg over det indre elementet og utløser onmouseout-hendelsen til det ytre elementet, vil onmouseover av det ytre elementet også bli utløst umiddelbart, så vi trenger bare å utsette handlingen som onmouseout-hendelsen til det ytre elementet må utføre i en kort periode for å kjøre, og deretter utføre clearTimeout-metoden i onmouseover-hendelsen, for å unngå hendelsesinterferens forårsaket av det interne elementet.
Se følgende figur for den spesifikke utførelsesprosessen (vertikal stiplet linje representerer tid):
Dette er en smart tilnærming, fordi når onmouseout utløses, utføres ikke den substansielle metoden umiddelbart, men venter i en kort periode. Hvis onmouseover-hendelsen utløses umiddelbart i denne perioden, er det i praksis sikkert at onmouseout-hendelsen utløses på grunn av interferens fra interne elementer, så bruk clearTimeout i onmouseover-hendelsen for å forhindre at den forsinkede metoden kjøres.
2. inneholder
Gjør følgende vurdering når du bruker onmouseover, og kjør deretter metodekroppen når resultatet er sant:
Gjør følgende vurdering når du onmouseout, og kjør deretter metodekroppen når resultatet er sant:
Her er en forklaring på betydningen av de to kodelinjene ovenfor:
I IE har alle HTML-elementer en containe-metode som avgjør om det nåværende elementet inneholder et spesifisert element. Vi bruker denne metoden for å avgjøre om en hendelse til et ytre element utløses av et internt element, og hvis et internt element forårsaker en uønsket hendelse, ignorerer vi denne hendelsen.
event.fromElement peker på elementet musen forlater når onmouseover- og onmouseout-hendelsene utløses; event.toElement peker på elementet musen går inn i når onmouseover- og onmouseout-hendelsene utløses.
Så betydningen av de to kodelinjene ovenfor er:
- Når onmouseover-hendelsen utløses, avgjør den om elementet musen etterlater er et internt element i det nåværende elementet, og i så fall ignorerer det denne hendelsen;
- Når onmouseout-hendelsen utløses, vurder om elementet musen legger inn er et internt element i det nåværende elementet, og hvis ja, ignorer denne hendelsen;
På denne måten forstyrrer ikke det indre elementet onmouseover- og onmouseout-hendelsene til det ytre elementet.
Men problemet er igjen at ikke-IE-nettlesere ikke støtter containe-funksjonen, men nå som vi kjenner funksjonen til containe-funksjonen, kan vi legge til følgende kode for å legge til følgende kode for å legge til contain-støtte for ikke-IE-nettlesere:
Metodene ovenfor er ikke kompatible med Firefox:
Poenget er jQuery:
jQueryBruk mouseleave i stedet for mouseout, slik at det som er sagt ovenfor ikke skjer.
I tillegg vil mouseoveren bli utløst gjentatte ganger, bare bruk mouseenter i stedet.
Perfekt løsning~
|
Publisert på 17.12.2018 14:57:53
|
|
|
|
