Mówiąc o posiadaniu elementu DIV, w środku jest element IMG i SPAN – nie martw się, jak te dwa elementy wewnętrzne są rozmieszczone, to nie jest kwestia, o której chcę mówić.
Aby uzyskać efekty specjalne, muszę użyć zdarzeń onmouseover i onmouseout TD, a podczas testów znajdę następującą sytuację:
Gdy mysz porusza się wewnątrz DIV, wyzwalane jest zdarzenie onmouseover; Następnie przesuń mysz do elementu IMG lub SPAN wewnątrz DIV – zdecydowanie nie sądzimy, żeby mysz przesunęła się na zewnątrz DIV, ale dziwne jest to, że wywołane jest zdarzenie onmouseout, a zdarzenie onmouseover również natychmiast się wywołuje.
To nie jest to, czego chcę, więc jak mogę "zablokować" interferencję zdarzeń Javascrip{filtering}t wywoływanych przez elementy wewnętrzne do elementów zewnętrznych?
Oto dwie metody:
1. setTimeout
Ponieważ po przejściu myszy po wewnętrznym elemencie i wywołaniu zdarzenia onmouseout elementu zewnętrznego, onmouseover elementu zewnętrznego również zostanie natychmiast wywołany, więc wystarczy opóźnić akcję, którą zdarzenie onmouseout musi wykonać przez element zewnętrzny, na krótki czas, a następnie wykonać metodę clearTimeout w zdarzeniu onmouseover, aby uniknąć zakłóceń spowodowanych przez element wewnętrzny.
Proszę zobaczyć poniższy rysunek dotyczący konkretnego procesu wykonania (pionowa przerywana linia oznacza czas):
To sprytne podejście, ponieważ gdy onmouseout zostaje wyzwalane, metoda materialna nie jest wykonywana od razu, lecz czeka przez krótki czas. Jeśli zdarzenie onmouseover zostanie wywołane natychmiast w tym czasie, to praktycznie pewne jest, że zdarzenie onmouseout zostało wywołane z powodu zakłóceń ze strony elementów wewnętrznych, więc użyj clearTimeout w zdarzeniu onmouseover, aby zapobiec wykonaniu metody opóźnionej.
2. zawiera
Wykonaj następujący osąd podczas onmouseover, a następnie wykonaj ciało metody, gdy wynik jest prawdziwy:
Wykonaj następującą decyzję podczas onmouseout, a następnie wykonaj ciało metody, gdy wynik jest prawdziwy:
Oto wyjaśnienie znaczenia powyższych dwóch linii kodu:
W IE wszystkie elementy HTML mają metodę contain, która określa, czy dany element zawiera określony element. Używamy tej metody, aby ustalić, czy zdarzenie związane z zewnętrznym elementem jest wywołane przez element wewnętrzny, a jeśli element wewnętrzny powoduje wywołanie niepożądanego zdarzenia, to ignorujemy to zdarzenie.
event.fromElement wskazuje element, który mysz opuszcza, gdy wyzwalane są zdarzenia onmouseover i onmouseout; event.toElement wskazuje element, który mysz wprowadza w momencie wyzwalania zdarzeń onmouseover i onmouseout.
Zatem znaczenie powyższych dwóch linii kodu jest następujące:
- Gdy zdarzenie onmouseover zostaje wyzwalane, określa, czy element pozostawiony przez mysz jest elementem wewnętrznym bieżącego elementu, a jeśli tak, to ignoruje to zdarzenie;
- Gdy wywołane zostanie zdarzenie onmouseout, oceń, czy element wprowadzony przez mysz jest elementem wewnętrznym bieżącego elementu, a jeśli tak, zignoruj to zdarzenie;
Dzięki temu element wewnętrzny nie zakłóca zdarzeń onmouseover i onmouseout elementu zewnętrznego.
Ale problem polega na tym, że przeglądarki nie-IE nie obsługują funkcji contain, ale teraz, gdy znamy funkcję contain, możemy dodać następujący kod, aby dodać poniższy kod wspierający contain dla przeglądarek nie-IE:
Powyższe metody nie są kompatybilne z Firefoxem:
Chodzi o jQuery:
jQueryUżyj myszkowego zamiast wyjść, tak aby to, co zostało powiedziane powyżej, nie miało miejsca.
Poza tym najechanie myszką będzie wyzwalane wielokrotnie, po prostu użyj mouseenter.
Idealne rozwiązanie~
|
Opublikowano 17.12.2018 14:57:53
|
|
|
|
