Problembeschreibung
Ich hoffe, dass, wenn die Maus zu ID1 wechselt, ID2 angezeigt wird und die Maus ID1 verlässt, ID2 angezeigt wird. Die Fragen sind wie folgt:
1. Wenn sich die Maus von ID1 zu ID2 bewegt, ändert sich die ID von der Anzeige zu der Anzeige und ändert sich dann zur Anzeige anschließend
2. Wenn sich die Maus von ID2 zu ID1 bewegt, wird die Anzeige von ID2 nicht display und wird dann angezeigt
Was ich möchte ist, dass ID2, wenn sich die Maus auf ID1 oder ID2 bewegt, ohne sich geändert wird.
<script type = "text/javaScript" src = "https://code.jquery.com/jquery-1.12.4.js"> </script> <div id = "id1"> <div id = "id2"> </div> </div> <script type = "text/javaScript"> $ ("#id1"). mouseover (function () {$ (this) .Children ()Problemlösung
Die anfängliche Problemanalyse war, dass die Maus, als die Maus von ID1 nach ID2 wechselte, die Maus von ID2 nach ID1 verließ und ein Mausout-Ereignis für ID1 ausgelöst wurde, sodass die Anzeige von ID2 nicht-Display wurde. Dann wechselte die Maus zu ID2, und ein Mausover -Ereignis wurde auf ID2 ausgelöst. Aufgrund des Blasenmechanismus wurde das Mausover-Ereignis auf ID1 vor dem Mausover auf ID2 ausgelöst und dann von ID2 von Nicht-Display zu Anzeige geändert. In ähnlicher Weise wird ein Mausout -Ereignis für ID2 ausgelöst, wenn sich die Maus von ID2 zu ID1 bewegt. Oder liegt es an dem Blasenmechanismus, dass das Mausout-Ereignis auf ID1 übertragen wird, und ID2 wechselt von der Anzeige zu Nicht-Display. Bevor die Maus zu ID1 wechselt, wird ein Mausover -Ereignis ausgelöst, und dann wird ID2 nicht angezeigt.
Es scheint, dass das obige Problem gelöst werden muss, indem die Maus von ID1 herausgebracht wird, wenn sich die Maus von ID1 nach ID2 bewegt. Wenn sich die Maus von ID2 nach ID1 bewegt, blockiert die Maus von ID2 von ID2 nach ID1, wodurch die Maus von ID2 über ID1 sprudelt. Dann kann das Problem nicht nur durch Verhinderung von Blasen gelöst werden.
Um solche Probleme zu lösen, bietet JQuery Mausenter- und Mouseleave -Methoden. Der JS -Code wird also in Folgendes geändert, was das Problem sehr gut löste.
$ ("#id1"). mouseenter (function () {$ (this) .Children ().An vielen Orten führen Mouseenter, Mouseleave, Mausover und Mausout vor, so dass ich einen kopierte und eingefügt habe.
/**************************************************************
1. Mauser und Mauszug
Das Mausover -Ereignis wird unabhängig davon ausgelöst, ob der Mauszeiger das ausgewählte Element oder sein untergeordnetes Element durchläuft.
Das Mausenterereignis wird nur ausgelöst, wenn der Mauszeiger das ausgewählte Element durchläuft.
2. Mausout und Mouselave
Das Mausout -Ereignis wird ausgelöst, unabhängig davon, ob der Mauszeiger das ausgewählte Element oder jedes untergeordnete Element verlässt.
Das Mouseleave -Ereignis wird nur ausgelöst, wenn der Mauszeiger das ausgewählte Element verlässt.
/**************************************************************
Das Phänomen ist in der Tat dieses Phänomen, aber der Prozess ist etwas vage. Mein Verständnis ist wie folgt:
Wenn sich der Mauszeiger zum ausgewählten Element bewegt, wird das Mausover -Ereignis ausgelöst. Jeder weiß, dass, wenn sich der Mauszeiger vom ausgewählten Element zu seinem untergeordneten Element bewegt, das Mausout -Ereignis des ausgewählten Elements zuerst ausgelöst wird und das Mausover -Ereignis des untergeordneten Elements zum ausgewählten Element sprudelt. Zu diesem Zeitpunkt entspricht es dem ausgewählten Element, das zuerst ein Mausout -Ereignis ausführt und dann ein Mausover -Ereignis ausführt.
Ändern Sie zur Überprüfung den Code in Folgendes
<script type = "text/javaScript" src = "https://code.jquery.com/jquery-1.12.4.js"> </script> <div id = "id1"> <div id = "id2"> </div> </div> <script type = "text/javaScript"> $ ("#id1"). mouseover (function () {// $ (this) .Children ()Bewegen Sie die Maus von der Seite auf ID1 und bewegen Sie sich dann von ID1 nach ID2. Die Konsolenausgabe lautet wie folgt
Es ist ersichtlich, dass ID1 Mausover-, Mausout- und Mausover -Ereignisse bezeichnet hat, die genau den oben analysierten analysiert sind.
Analyse der Implementierungsanalyse von Mouseenter und Mouselave
Prinzipanalyse
Aus der obigen Analyse können wir erkennen, dass das ausgewählte Element das Mausout -Ereignis nicht ausführt, und es führt auch nicht das Mausover -Ereignis, das die Unterklasse sprudelt. Wenn sich die Maus vom ausgewählten Element untergeordnetes Element in das ausgewählte Element bewegt, führt das ausgewählte Element das Mausover -Ereignis weder aus noch das Mausout -Ereignis aus, das die Unterklasse sprudelt.
Um den obigen Effekt zu erzielen, benötigen wir ein Attributbezogener Target des Ereignisobjekts, mit dem die Attribute der zugehörigen Knoten der Mausover- und Mausout -Ereigniszielknoten beurteilt werden. Einfach ausgedrückt, wenn das Mausover -Ereignis ausgelöst wird, repräsentiert das verwandte Target -Attribut den Knoten, den die Maus gerade verlassen hat, und wenn das Mausout -Ereignis ausgelöst wird, repräsentiert es das Objekt, auf das die Maus bewegt wird. Da MSIE diese Eigenschaft nicht unterstützt, hat sie die Eigenschaften ersetzt, nämlich von Auslieger und Toelement. Darüber hinaus benötigen wir die enthaltende Methode, um festzustellen, ob ein Objekt in einem anderen Objekt enthalten ist.
Auf diese Weise müssen Sie die folgenden zwei beurteilen, wenn sich die Maus bewegt
1. Nennen Sie Mausover, Sie müssen nur feststellen, ob das verwandte Target ein untergeordnetes Element des ausgewählten Elements ist. In diesem Fall wird es nicht ausgeführt (wenn sich das ausgewählte Element untergeordnetes Element zum ausgewählten Element bewegen wird, wird Mausover nicht ausgeführt; wenn sich das ausgewählte Element zum ausgewählten Elementelement über das Element des ausgewählten Elements bewegt, wird Bubbled Mouseover nicht ausgeführt).
2. Wenn Sie Mausout aufrufen, müssen Sie nur feststellen, ob das untergeordnete Element des verwandten Targets ausgewählt ist. In diesem Fall wird es nicht ausgeführt (wenn sich das ausgewählte Element untergeordnetes Element zum ausgewählten Element bewegen, wird das Mausout aus dem untergeordneten Element nicht ausgeführt. Wenn sich das ausgewählte Element zum ausgewählten Elementelement bewegen wird, wird der Mausover nicht ausgeführt).
Implementierungsprozess
Stellen Sie fest, ob es eine Einschlussbeziehung zwischen zwei Elementen gibt
Die enthaltende Funktion ist in jQuery wie folgt eingekapselt
Es kann wie folgt vereinfacht werden
// beurteilen, ob die beiden A enthält, enthält (a, b) {return a.contains? a!Einführung in die Vergleiche
Diese Methode ist Teil der DOM -Level -3 -Spezifikation und ermöglicht es Ihnen, die gegenseitige Position zwischen den 2 DOM -Knoten zu bestimmen. Diese Methode ist leistungsfähiger als .Contains (). Eine mögliche Anwendung dieser Methode besteht darin, DOM -Knoten in eine detaillierte und genaue Reihenfolge zu sortieren. Die von nodea.comParedocumentPosition (NODEB) zurückgegebenen Informationen werden wie folgt beschrieben:
Bit -Nummer Bedeutung
Durch das oben oben genannte können wir verstehen, warum wir es als A.ComparedocumentPosition (B) & 16 schreiben sollten, denn wenn der Knoten A Knoten B enthält, wird 16 zurückgegeben, 16 und 16 = 1 werden zurückgegeben und die Ergebnisse werden in anderen Fällen 0 sein.
Holen Sie sich die Kompatibilität für die Kompatibilität
Um mit verschiedenen Browsern kompatibel zu sein, lesen Sie den Jquery -Quellcode, um den folgenden Code zu erhalten, um die Attribute zugewandt zu erhalten, die die zugehörigen Target der Mausover- und Mausout -Ereigniszielknoten erhalten.
Funktion getrelated (e) {var verwandt; var type = e.type.tolowerCase (); // Erhalten Sie den Ereignisnamen hier if (type == 'mouseover') {verwandt = E. -ellatedTarget || e.Fromelement} else if (type = 'mausout') {verwandt = E. }Verbessern Sie Mausover und Mausout
Verbesserung von Mausover und Mausout, um eine verbesserte Mauszug- und Mouseleave -Effekte zu erzielen, sind alle Codes wie folgt.
<! DocType html> <html> <kopf> <titels> </title> </head> <body> <div id = "id1"> <div id = "id2"> </div> </div> <script type = "text/javascript" src = "https type = "text/javaScript"> // beurteilen, ob zwei a enthält, enthält (a, b) {return a.contains? A! = B && A.Contains (b): !! (comparedocumentPosition (b) & 16); if (type = 'mausout') {verwandt = E. } $ (function () {$ ("#id1"). Mausover (Funktion (e) {// verteidigen, wobei die Maus zu ID1 var verwandt ist = getrelated (e); // Wenn verwandt ist, ist das untergeordnete Element ID2 von ID1, dh sich von Child Element ID2 ID1. ausgeführt if (this! Element, keine Operation wird durchgeführt, sonst wird die entsprechende Operation durchgeführt, wenn (this!Test, Mausbewegungsroute, wie im folgenden Diagramm gezeigt
Wie aus der Konsole, haben Mausover und Mouseout in diesem Moment voll ausgestattete Effekte von Mouseenter und Mouselave.
Einkapselung des Codes
Wenn Sie jedes Mal, wenn Sie eine solche Operation ausführen, laden oder viele Vertreter schreiben müssen, ist dies eine mühsame Aufgabe. Um zukünftige Operationen zu erleichtern, wird eine geeignete Verpackung durchgeführt, JQuery simuliert und Ihre eigene Mausecke und Mouselave erzeugt. Der Code wird wie folgt in die Datei dqmouse.js eingekapselt:
(Funktion (w) {var dqmouse = function (obj) {// Funktionsbody Return New dqMouse.fn.init (obj);} dqmouse.fn = dqMouse.Prototype = {// erweiterte Prototyp -Objekt Obj: null, dqmouse: "1.0.0", init: function (OBJ) {this.abj = Obj. Dies;} enthält: Funktion (a, b) {return a.contains? if (type == 'mouseover') {verwandt = E. verwandt = _self.getrelated (e); ! _self.Contains (obj, verwandt)) {fn ();}} return _self;}} dqmouse.fn.init.Prototype = dqMouse.fn; Fenster.dqmouse = Fenster. $$ = DQMouse;}) (Fenster);Die mit dem Titel "Quelldatei" bezeichnete Quelldatei lautet wie folgt:
<div id = "id1"> <div id = "id2"> </div> </div> <script type = "text/javascript" src = "dqmouse.js"> </script> <script type = "text/javaScript"> var id1 = document.getElementById ('id1'); $$ (id1) .over (function () {console.log ('mouseover');}). </script>Das obige ist der relevante Inhalt darüber, wie das Problem von Mouseover und Mouseout mehrmals in JS gelöst werden kann, den der Editor Ihnen vorgestellt hat. Ich hoffe, es wird für alle hilfreich sein!