Apropos DIV-Element: Es gibt ein IMG-Element und ein SPAN-Element darin, mach dir keine Sorgen darüber, wie diese beiden internen Elemente angeordnet sind, das ist nicht der Punkt, den ich besprechen möchte.
Um einige Spezialeffekte zu erzielen, muss ich die onmouseover- und onmouseout-Events von TD verwenden, und wenn ich es teste, finde ich folgende Situation:
Wenn sich die Maus im DIV bewegt, wird das Onmouseover-Ereignis ausgelöst; Dann bewegt man die Maus zum IMG- oder SPAN-Element innerhalb des DIV, wir glauben definitiv nicht, dass die Maus nach außen am DIV gewandert ist, aber das Merkwürdige ist, dass das onmouseout-Event ausgelöst wird und das onmouseover-Event ebenfalls sofort ausgelöst wird.
Das ist nicht das, was ich will, also wie kann ich die Interferenz von Javascrip{filtering}t-Ereignissen, die von internen Elementen zu externen Elementen gebracht werden, "blockieren"?
Hier sind zwei Methoden:
1. setTimeout
Denn nachdem die Maus über das innere Element bewegt und das Onmouseout-Ereignis des äußeren Elements ausgelöst hat, wird auch das Onmouseover des äußeren Elements sofort ausgelöst, sodass wir die Aktion, die das onmouseout-Ereignis des äußeren Elements ausführen muss, nur für einen kurzen Zeitraum verzögern und dann die ClearTimeout-Methode im onmouseover-Event ausführen müssen, um die durch das interne Element verursachte Ereignisinterferenz zu vermeiden.
Bitte sehen Sie sich die folgende Abbildung für den spezifischen Ausführungsprozess an (vertikale gestrichelte Linie steht für die Zeit):
Dies ist ein cleverer Ansatz, denn wenn onmouseout ausgelöst wird, wird die substantielle Methode nicht sofort ausgeführt, sondern wartet nur für kurze Zeit. Wenn das Onmouseover-Ereignis während dieser Zeit sofort ausgelöst wird, ist es im Grunde sicher, dass das Onmouseout-Ereignis durch Störungen durch interne Elemente ausgelöst wird, daher nutzt ClearTimeout im Onmouseover-Ereignis, um die verzögerte Ausführung der Methode zu verhindern.
2. enthält
Fällt beim Onmouseover folgendes Urteil und führt dann den Methodenkörper aus, wenn das Ergebnis stimmt:
Fällt folgendes Urteil bei onmouseout und führt dann den Methodenkörper aus, wenn das Ergebnis wahr ist:
Hier ist eine Erklärung der Bedeutung der oben genannten beiden Codezeilen:
Im IE verfügen alle HTML-Elemente über eine Containe-Methode, die bestimmt, ob das aktuelle Element ein bestimmtes Element enthält. Wir verwenden diese Methode, um festzustellen, ob ein Ereignis eines äußeren Elements von einem internen Element ausgelöst wird, und wenn ein internes Element ein unerwünschtes Ereignis auslöst, ignorieren wir dieses Ereignis.
event.fromElement zeigt auf das Element, das die Maus verlässt, wenn die Ereignisse onmouseover und onmouseout ausgelöst werden; event.toElement zeigt auf das Element, das die Maus betritt, wenn die onmouseover- und onmouseout-Ereignisse ausgelöst werden.
Die Bedeutung der oben genannten beiden Codezeilen lautet also:
- Wenn das onmouseover-Ereignis ausgelöst wird, bestimmt es, ob das von der Maus verbleibende Element ein internes Element des aktuellen Elements ist, und falls ja, ignoriert es dieses Ereignis;
- Wenn das Onmouseout-Ereignis ausgelöst wird, beurteilen Sie, ob das von der Maus eingegebene Element ein internes Element des aktuellen Elements ist, und falls ja, ignorieren Sie dieses Ereignis;
So stört das innere Element nicht die Onmouseover- und Onmouseout-Ereignisse des äußeren Elements.
Das Problem ist jedoch, dass Nicht-IE-Browser die Containe-Funktion nicht unterstützen, aber jetzt, da wir die Funktion der Containe-Funktion kennen, können wir folgenden Code hinzufügen, um den folgenden Code hinzuzufügen, um Containe-Unterstützung für Nicht-IE-Browser hinzuzufügen:
Die oben genannten Methoden sind nicht mit Firefox kompatibel:
Der Punkt ist jQuery:
jQueryBenutze mouseleave statt mouseout, damit das oben Gesagte nicht eintritt.
Außerdem wird der Mouseover wiederholt ausgelöst, benutze stattdessen einfach Mouseenter.
Perfekte Lösung~
|
Veröffentlicht am 17.12.2018 14:57:53
|
|
|
|
