På tal om att ha ett DIV-element, det finns ett IMG-element och ett SPAN-element inuti, oroa dig inte för hur dessa två interna element är upplagda, det är inte den här punkten jag vill diskutera.
För att uppnå några specialeffekter behöver jag använda TD:s onmouseover- och onmouseout-händelser, och när jag testar det hittar jag följande situation:
När musen rör sig inuti DIV:n triggas onmouseover-händelsen; Flytta sedan musen till IMG- eller SPAN-elementet inne i DIV:n, vi tror definitivt inte att musen har flyttat sig utanför DIV:n, men det märkliga är att onmouseout-händelsen triggas, och onmouseover-händelsen triggas också omedelbart.
Det här är inte vad jag vill, så hur kan jag "blockera" interferenset från Javascrip{filtering}t-händelser som förs av interna element till externa element?
Här är två metoder:
1. setTimeout
Eftersom musen rör sig över det inre elementet och utlöser onmouseout-händelsen för det yttre elementet, kommer onmouseover av det yttre elementet också att triggas omedelbart, så vi behöver bara fördröja åtgärden som onmouseout-händelsen för det yttre elementet behöver utföra under en kort tid för att köras, och sedan köra clearTimeout-metoden i onmouseover-händelsen, för att undvika händelseinterferens orsakad av det interna elementet.
Se följande figur för den specifika exekveringsprocessen (vertikal streckad linje representerar tid):
Detta är en smart metod, eftersom när onmouseout triggas utförs inte den substantiella metoden omedelbart, utan väntar under en kort tid. Om onmouseover-händelsen triggas omedelbart under denna tid är det i princip säkert att onmouseout-händelsen triggas på grund av störningar från interna element, så använd clearTimeout i onmouseover-händelsen för att förhindra att den fördröjda metoden körs.
2. innehåller
Gör följande bedömning när du onmouseover, och kör sedan metodkroppen när resultatet är sant:
Gör följande bedömning när du onmouseout, och kör sedan metodkroppen när resultatet är sant:
Här är en förklaring av betydelsen av de två kodraderna ovan:
I IE har alla HTML-element en containe-metod som avgör om det aktuella elementet innehåller ett specificerat element. Vi använder denna metod för att avgöra om en händelse för ett yttre element utlöses av ett internt element, och om ett internt element orsakar att en oönskad händelse utlöses, ignorerar vi denna händelse.
event.fromElement pekar på elementet där musen lämnar när onmouseover- och onmouseout-händelserna triggas; event.toElement pekar på det element som musen går in i när onmouseover- och onmouseout-händelserna triggas.
Så betydelsen av de två kodraderna ovan är följande:
- När onmouseover-händelsen triggas avgör den om det element som musen lämnar kvar är ett internt element i det aktuella elementet, och om så är fallet, ignorerar det denna händelse;
- När onmouseout-händelsen utlöses, bedöm om elementet som musen matar in är ett internt element i det aktuella elementet, och i så fall, ignorera denna händelse;
På så sätt stör inte det inre elementet onmouseover- och onmouseout-händelserna för det yttre elementet.
Men problemet är återigen att icke-IE-webbläsare inte stöder containe-funktionen, men nu när vi känner till funktionen för containe-funktionen kan vi lägga till följande kod för att lägga till följande kod för att lägga till containe-stöd för icke-IE-webbläsare:
Ovanstående metoder är inte kompatibla med Firefox:
Poängen är jQuery:
jQueryAnvänd mouseleave istället för mouseout, så att det som sagts ovan inte händer.
Dessutom kommer mouseovern att triggas upprepade gånger, använd bara mouseenter istället.
Perfekt lösning~
|
Publicerad på 2018-12-17 14:57:53
|
|
|
|
