Ko smo že pri DIV elementu, znotraj sta IMG in SPAN element, ne skrbite, kako sta ta dva notranja elementa razporejena, to ni točka, o kateri želim razpravljati.
Za dosego posebnih učinkov moram uporabiti TD-jeve dogodke onmouseover in onmouseout, in ko bom to testiral, bom našel naslednjo situacijo:
Ko se miška premakne znotraj DIV-a, se sproži dogodek onmouseover; Nato premaknite miško na IMG ali SPAN element znotraj DIV-a, zagotovo ne mislimo, da se je miška premaknila na zunanjo stran DIV-a, vendar je nenavadno to, da se dogodek onmouseout sproži, in dogodek onmouseover se prav tako takoj sproži.
To ni tisto, kar želim, zato kako lahko "blokiram" motnje Javascrip{filtering}t dogodkov, ki jih notranji elementi povzročajo zunanjim elementom?
Tukaj sta dve metodi:
1. setTimeOut
Ker se po tem, ko miška premakne čez notranji element in sproži dogodek onmouseout zunanjega elementa, se takoj sproži tudi onmouseover zunanjega elementa, zato moramo le za kratek čas zamakniti dejanje, ki ga mora izvesti dogodek onmouseout zunanjega elementa, nato pa izvesti metodo clearTimeOut v dogodku onmouseover, da se izognemo motnjam dogodka, ki jih povzroča notranji element.
Oglejte si naslednjo sliko za specifičen postopek izvedbe (navpična črtkasta črta predstavlja čas):
To je pameten pristop, saj ko se sproži onmouseout, se vsebinska metoda ne izvede takoj, ampak počaka kratek čas. Če se dogodek onmouseover sproži takoj v tem času, je praktično gotovo, da je dogodek onmouseout sprožen zaradi motenj notranjih elementov, zato uporabite clearTimeout v dogodku onmouseover, da preprečite izvajanje zakasnjene metode.
2. vsebuje
Naredite naslednjo presojo pri onmouseover, nato pa izvedite telo metode, ko je rezultat resničen:
Naredite naslednjo presojo, ko je onmouseout, in nato izvedite telo metode, ko je rezultat resničen:
Tukaj je razlaga pomena zgornjih dveh vrstic kode:
V IE imajo vsi HTML elementi metodo contain, ki določa, ali trenutni element vsebuje določen element. To metodo uporabljamo za ugotavljanje, ali je dogodek zunanjega elementa sprožen z notranjim elementom, in če notranji element sproži nezaželen dogodek, ta dogodek ignoriramo.
event.fromElement kaže na element, kjer miška zapusti, ko se sprožijo dogodki onmouseover in onmouseout; event.toElement kaže na element, ki ga miška vnese, ko se sprožijo dogodki onmouseover in onmouseout.
Torej pomen zgornjih dveh vrstic kode je:
- Ko se sproži dogodek onmouseover, ugotovi, ali je element, ki ga pusti miška, notranji element trenutnega elementa, in če da, ta dogodek ignorira;
- Ko se sproži dogodek onmouseout, presodite, ali je element, ki ga vnese miška, notranji element trenutnega elementa, in če je, ta dogodek ignorirate;
Na ta način notranji element ne moti dogodkov onmouseover in onmouseout zunanjega elementa.
A težava je spet v tem, da ne-IE brskalniki ne podpirajo funkcije contain, vendar zdaj, ko poznamo funkcijo contain, lahko dodamo naslednjo kodo, da dodamo naslednjo kodo za podporo contain brskalnikom, ki niso IE:
Zgornje metode niso združljive s Firefoxom:
Bistvo je jQuery:
jQueryUporabi mouseleave namesto mouseout, tako da se zgoraj omenjeno ne zgodi.
Poleg tega se bo miška večkrat sprožila, samo uporabi mouseenter.
Popolna rešitev~
|
Objavljeno na 17. 12. 2018 14:57:53
|
|
|
|
