Говорейки за DIV елемент, вътре има IMG и SPAN елемент, не се притеснявайте как са разположени тези два вътрешни елемента, това не е темата, която искам да обсъждам.
За да постигна някои специални ефекти, трябва да използвам събитията onmouseover и onmouseout на TD, и когато ги тествам, ще намеря следната ситуация:
Когато мишката се движи вътре в DIV, се задейства събитието onmouseover; След това преместете мишката към елемента IMG или SPAN вътре в DIV, определено не мислим, че мишката се е преместила навън на DIV, но странното е, че събитието onmouseout се задейства, както и събитието onmouseover се задейства веднага.
Това не е това, което искам, така че как мога да "блокирам" смущенията от събитията на Javascrip{filtering}t, предизвикани от вътрешни елементи към външни елементи?
Ето два метода:
1. задайте тайм-аут
Тъй като след като мишката се премести над вътрешния елемент и задейства onmouseout събитието на външния елемент, onmouseover на външния елемент също ще се задейства веднага, така че трябва само да забавим действието, което onmouseout събитието на външния елемент трябва да изпълни, за кратък период от време, и след това да изпълним метода clearTimeout в onmouseover събитието, за да избегнем смущенията, причинени от вътрешния елемент.
Моля, вижте следната фигура за конкретния процес на изпълнение (вертикалната пунктирана линия представя времето):
Това е хитър подход, защото когато се задейства onmouseout, същественият метод не се изпълнява веднага, а изчаква кратко време. Ако събитието onmouseover се задейства веднага по това време, тогава е почти сигурно, че събитието onmouseout се задейства поради смущения от вътрешни елементи, затова използвайте clearTimeout в събитието onmouseover, за да предотвратите изпълнението на забавения метод.
2. съдържа
Направете следното решение при overover на мишката, а след това изпълнете основното тяло на метода, когато резултатът е верен:
Направете следното преценяване при излизане на мишка и след това изпълнете тялото на метода, когато резултатът е верен:
Ето обяснение на значението на горните два реда код:
В IE всички HTML елементи имат метод contain, който определя дали текущият елемент съдържа определен елемент. Използваме този метод, за да определим дали събитие на външен елемент се задейства от вътрешен елемент, и ако вътрешен елемент предизвика нежелано събитие, тогава го игнорираме.
event.fromElement посочва елемента, от който мишката напуска, когато се задействат събитията onmouseover и onmouseout; event.toElement посочва елемента, в който мишката влиза, когато се задействат събитията onmouseover и onmouseout.
Така че значението на горните два реда код е:
- Когато се задейства събитието onmouseover, то определя дали елементът, оставен от мишката, е вътрешен елемент на текущия елемент, и ако да, игнорира това събитие;
- Когато се задейства събитието onmouseout, преценете дали елементът, въведен от мишката, е вътрешен елемент на текущия елемент, и ако да, игнорирайте това събитие;
По този начин вътрешният елемент не се намесва на събитията onmouseover и onmouseout на външния елемент.
Но проблемът отново е, че не-IE браузърите не поддържат функцията contain, но сега, когато знаем функцията на contain, можем да добавим следния код, за да добавим следния код и да добавим поддръжка за contain за не-IE браузъри:
Горните методи не са съвместими с Firefox:
Същността е в jQuery:
jQueryИзползвайте mouseleave вместо mouseout, за да не се случи казаното по-горе.
Също така, Mouseover ще се задейства многократно, просто използвайте MouseEnter вместо това.
Перфектно решение~
|
Публикувано в 17.12.2018 г. 14:57:53 ч.
|
|
|
|
