Puhuttaessa DIV-elementistä, sisällä on IMG-elementti ja SPAN-elementti, älä huolehdi siitä, miten nämä kaksi sisäistä elementtiä on aseteltu – tämä ei ole se pointti, josta haluan puhua.
Erikoistehosteiden saavuttamiseksi minun täytyy käyttää TD:n onmouseover- ja onmouseout-tapahtumia, ja kun testaan sitä, löydän seuraavan tilanteen:
Kun hiiri liikkuu DIV:n sisällä, onmouseover-tapahtuma käynnistyy; Sitten siirrä hiiri IMG- tai SPAN-elementille DIV:n sisällä, emme todellakaan usko, että hiiri on siirtynyt DIV:n ulkopuolelle, mutta outoa onmouseout-tapahtuma laukeaa, ja onmouseover-tapahtuma käynnistyy välittömästi.
Tämä ei ole sitä, mitä haluan, joten miten voin "estää" Javascrip{filtering}t -tapahtumien häiriön, joita sisäiset elementit tuovat ulkoisiin elementteihin?
Tässä on kaksi menetelmää:
1. setTimeout
Koska kun hiiri siirtyy sisemmän elementin yli ja käynnistää ulkoisen elementin onmouseout-tapahtuman, myös ulkoisen elementin onmouseover käynnistyy välittömästi, joten meidän tarvitsee viivästyttää vain sitä toimintoa, jonka ulko-elementin onmouseout-tapahtuma tarvitsee suorittaa, lyhyen ajan ja sitten suorittaa clearTimeout-menetelmä onmouseover-tapahtumassa, jotta vältetään sisäisen elementin aiheuttama tapahtumahäiriö.
Katso seuraava kuva tietystä suoritusprosessista (pystysuora katkoviiva edustaa aikaa):
Tämä on fiksu lähestymistapa, koska kun onmouseout aktivoituu, substantiive-menetelmää ei suoriteta heti, vaan se odottaa lyhyen aikaa. Jos onmouseover-tapahtuma käynnistyy välittömästi tämän ajan, on käytännössä varmaa, että onmouseout-tapahtuma laukaistaan sisäisten elementtien häiriön vuoksi, joten käytä clearTimeoutia onmouseover-tapahtumassa estääksesi viivästetyn metodin suorituksen.
2. sisältää
Tee seuraava arvio onmouseoverissa ja suorita metodin runko, kun tulos on tosi:
Tee seuraava arvio onmouseoutissa ja suorita metodin runko, kun tulos on tosi:
Tässä on selitys yllä olevien kahden koodirivin merkityksestä:
IE:ssä kaikilla HTML-alkioilla on contain-metodi, joka määrittää, sisältääkö nykyinen alkio tietyn alkion. Käytämme tätä menetelmää selvittääksemme, laukaiseeko ulkoisen elementin tapahtuma sisäisestä elementistä, ja jos sisäinen elementti aiheuttaa ei-toivotun tapahtuman, jätämme tämän tapahtuman huomiotta.
event.fromElement osoittaa elementin, josta hiiri poistuu, kun onmouseover- ja onmouseout-tapahtumat käynnistyvät; event.toElement osoittaa elementtiin, johon hiiri pääsee, kun onmouseover- ja onmouseout-tapahtumat käynnistyvät.
Joten yllä olevien kahden koodirivin merkitys on:
- Kun onmouseover-tapahtuma käynnistyy, se määrittää, onko hiiren jättämä elementti nykyisen elementin sisäinen elementti, ja jos on, se jättää tämän tapahtuman huomiotta;
- Kun onmouseout-tapahtuma käynnistyy, arvioida, onko hiiren syöttämä elementti nykyisen elementin sisäinen elementti, ja jos on, jätä tämä tapahtuma huomiotta;
Näin sisempi elementti ei häiritse ulkoelementin onmouseover- ja onmouseout-tapahtumia.
Mutta ongelma on jälleen se, että ei-IE-selaimet eivät tue contain-funktiota, mutta nyt kun tiedämme contain-funktion funktion, voimme lisätä seuraavan koodin lisätäksemme contain-tuen ei-IE-selaimille:
Edellä mainitut menetelmät eivät ole yhteensopivia Firefoxin kanssa:
Pointti on jQuery:
jQueryKäytä mouseleaveä hiiren ulkopuolen sijaan, jotta yllä sanottu ei tapahdu.
Lisäksi mouseover-toiminto käynnistyy toistuvasti, käytä hiirenvaihtoa sen sijaan.
Täydellinen ratkaisu~
|
Julkaistu 17.12.2018 14.57.53
|
|
|
|
