Rääkides DIV elemendist, on sees IMG element ja SPAN element, ära muretse, kuidas need kaks sisemist elementi paigutatud on, see pole see teema, millest ma rääkida tahan.
Eriefektide saavutamiseks pean kasutama TD onmouseover ja onmouseout sündmusi ning kui seda testin, leian järgmise olukorra:
Kui hiir liigub DIV-i sees, käivitub onmouseover sündmus; Seejärel liigutame hiire IMG või SPAN elemendi juurde DIV-s, me kindlasti ei arva, et hiir on liikunud DIV-i välisküljele, kuid kummaline on see, et onmouseout sündmus käivitub ja onmouseover sündmus käivitub kohe.
See ei ole see, mida ma tahan, nii et kuidas ma saan "blokeerida" Javascrip{filtering}t sündmuste sekkumise, mida sisemised elemendid toovad välistele elementidele?
Siin on kaks meetodit:
1. setTimeout
Kuna pärast seda, kui hiir liigub sisemise elemendi kohal ja käivitab väliselemendi onmouseout sündmuse, käivitub ka välimise elemendi onmouseover kohe, seega peame vaid lühikest aega viivitama tegevust, mida välimise elemendi onmouseout sündmus peab täitma, ning seejärel käivitama clearTimeout meetodi onmouseover sündmuses, et vältida sisemise elemendi põhjustatud sündmuse häiret.
Palun vaadake järgmist joonist konkreetse täitmisprotsessi kohta (vertikaalne katkendjoon tähistab aega):
See on nutikas lähenemine, sest kui onmouseout käivitub, ei käivitata sisulist meetodit kohe, vaid ootab lühikest aega. Kui onmouseover-sündmus käivitub kohe sel ajal, on sisuliselt kindel, et onmouseout sündmus käivitub sisemiste elementide häire tõttu, seega kasuta clearTimeouti onmouseover-sündmuses, et takistada viivitusega meetodi käivitamist.
2. sisaldab
Tehke järgmine hinnang, kui onmouseover, ja seejärel käivita meetodi keha, kui tulemus on tõene:
Tee järgmine hinnang, kui on hiire väljas, ja seejärel käivita meetodikeha, kui tulemus on tõene:
Siin on selgitus ülaltoodud kahe koodirea tähendusest:
IE-s on kõigil HTML-elementidel contain-meetod, mis määrab, kas praegune element sisaldab kindlat elementi. Seda meetodit kasutame selleks, et määrata, kas väliselemendi sündmus käivitub sisemise elemendi poolt, ja kui sisemine element põhjustab soovimatu sündmuse, siis ignoreerime seda sündmust.
event.fromElement osutab elemendile, kust hiir lahkub, kui onmouseover ja onmouseout sündmused käivituvad; event.toElement osutab elemendile, kuhu hiir siseneb, kui onmouseover ja onmouseout sündmused käivituvad.
Seega on ülaltoodud kahe koodirea tähendus järgmine:
- Kui onmouseover sündmus käivitub, määrab see, kas hiire poolt jäetud element on praeguse elemendi sisemine element, ja kui jah, siis ignoreerib seda sündmust;
- Kui onmouseout sündmus käivitub, hinnake, kas hiirega sisestatud element on praeguse elemendi sisemine element, ja kui jah, siis ignoreerige seda sündmust;
Nii ei sega sisemine element välise elemendi onmouseover ja onmouseout sündmusi.
Aga probleem on jälle selles, et mitte-IE brauserid ei toeta contain-funktsiooni, kuid nüüd, kui teame contain-funktsiooni, saame lisada järgmise koodi, et lisada järgmine kood, et lisada contain-toe mitte-IE brauseritele:
Ülaltoodud meetodid ei ole Firefoxiga ühilduvad:
Oluline on jQuery:
jQueryKasuta hiirelehte hiireväljaku asemel, nii et eelpool öeldu ei juhtuks.
Samuti käivitub hiire ülemine korduvalt – kasuta hiire sisestajat.
Täiuslik lahendus~
|
Postitatud 17.12.2018 14:57:53
|
|
|
|
