Ausführliche Erläuterung der Verwendung von Mouseover und Mouseout in den Javascript-Kenntnissen

Dieser Artikel verhindert nicht wirklich, dass die untergeordneten Elemente des Ereigniselements sprudeln...

Es wird lediglich eine Beurteilung vorgenommen, wenn das untergeordnete Element zum Ereigniselement sprudelt, um zu bestimmen, ob das Ereignis ausgelöst werden soll, oh ... nein, es sollte sein, ob die relevanten Vorgänge in der Ereignisfunktion ausgeführt werden sollen ...

Zunächst können Sie hier klicken: Auftreten des Problems

Hinweis: Das Mouseover/Out-Ereignis in jquery weist ebenfalls dieses Problem auf

Lösung 1:

Unter IE gibt es Mouseenter- und Mouseleave-Ereignisse, die Mouseover und Mouseout ersetzen.

Im Internet gibt es viele Meinungen, dass diese beiden Ereignisse nur vom IE und nicht von anderen Browsern unterstützt werden.

Aber die neuesten Versionen von Firefox und Google unterstützen Mouseenter und Mouseleave! ! ! ! !

Darüber hinaus ist der Unterstützungsbereich von IE: [ie5, also sollten wir IE nicht versprühen...

Getestet mit anderen Browsern:

Mouseenter und Mouseleave werden in Firefox/3.6.28 nicht unterstützt. Es ist nicht bekannt, welche Version von Firefox diese beiden Ereignisse unterstützt...

Es wird in Opera9.50 Alpha und Opera9.00 Beta nicht unterstützt. Tatsächlich besteht keine Notwendigkeit, Opera jetzt zu testen. Die neueste Version von Opera basiert auf dem Webkit-Kernel...

Die niedrigere Version von Google wurde nicht getestet...

Natürlich können diese alten Browserversionen grundsätzlich ignoriert werden, daher sollte dies die beste Lösung sein: Verwenden Sie MouseEnter- und MouseLeave-Ereignisse, um MouseOver und MouseOut zu ersetzen.

Beispiele für diese beiden Ereignisse finden Sie hier: „mouseenter“ und „mouseleave“

Hinweis: Jquery verfügt auch über Mouseenter- und Mouseleave-Ereignisse, die mit allen Browsern kompatibel sind.

Lösung 2:

Die obige Methode wird von älteren Versionen von Firefox und Google nicht unterstützt. Wenn Sie die größtmögliche Kompatibilität wünschen, können Sie weiter unten lesen

Wir verwenden var reltg = e.latedTarget ? e.latedTarget : e.type == 'mouseout' : e.fromElement, um ereignisbezogene Elemente zu erhalten. Verwenden Sie dann die Beziehung zwischen diesem ereignisbezogenen Element und dem Ereigniselement (die enthaltene Beziehung), um zu bestimmen, ob eine verwandte Ereignisverarbeitung durchgeführt werden soll.

Für das Mouseout-Ereignis ist reltg der Knoten, den der Mauszeiger betritt, wenn er das Ziel verlässt.

Für das Mouseover-Ereignis ist reltg der Knoten, den der Mauszeiger verlässt, wenn er sich zum Zielknoten bewegt.

Wenn reltg in der Mouseout-Ereignisfunktion von li das untergeordnete Element von li ist, müssen wir die entsprechenden Vorgänge nicht ausführen. Wenn reltg das übergeordnete Element von li ist, führen wir die entsprechenden Vorgänge aus.

Wir können die Inklusionsbeziehung zwischen li und reltg mithilfe der folgenden isMouseLeaveOrEnter-Funktion beurteilen:

//判断事件相关元素与li的关系 如果事件相关元素为li的子元素就返回false 反之返回true
function isMouseLeaveOrEnter(e, handler) { 
　　if (e.type != 'mouseout' && e.type != 'mouseover') return false; 
　　var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;
　　while (reltg && reltg != handler) reltg = reltg.parentNode;
　　return (reltg != handler);
};

Li.onmouseout = function(e) {
　　e = e||window.event;
　　if (isMouseLeaveOrEnter(e,this)) {
　　　　//运行相关操作
　　};
}

Der offensichtliche Nachteil dieser Methode besteht darin, dass alle übergeordneten Elemente in isMouseLeaveOrEnter durchlaufen werden müssen, was ein Leistungsproblem darstellt

Lösung drei:

Diese Methode hat die gleiche Idee wie Methode zwei, außer dass wir „compareDocumentPosition/contains“ verwenden, um die Einschlussbeziehung zwischen li und reltg zu bestimmen, wodurch die Leistungsprobleme optimiert werden, die durch das Durchlaufen aller übergeordneten Elemente in Methode zwei entstehen.

Schauen wir uns den Code direkt an:

//判断node是否为parent的子元素
//if node == parent 也会返回true
function contains(parent, node) {
　　if(parent.compareDocumentPosition){ //ff
　　　　var _flag = parent.compareDocumentPosition(node); 
　　　　return (_flag == 20 || _flag == 0)? true : false; 
　　}else if(parent.contains){ //ie
　　　　return parent.contains(node);
　　}
};

Li.onmouseout = function(e) {
　　e = e||window.event;
　　var relatedEle = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement
　　if (!contains(this, relatedEle)) {
　　　　show.innerHTML=show.innerHTML+'0';
　　}

}

Die Methode

compareDocumentPosition() vergleicht zwei Knoten und gibt eine Ganzzahl zurück, die ihre Position im Dokument beschreibt.

Der Rückgabewert kann sein:

1: Es spielt keine Rolle, die beiden Knoten gehören nicht zum selben Dokument.

2: Der erste Knoten (P1) befindet sich hinter dem zweiten Knoten (P2).

4: Der erste Knoten (P1) wird vor dem zweiten Knoten (P2) positioniert.

8: Der erste Knoten (P1) befindet sich innerhalb des zweiten Knotens (P2).

16: Der zweite Knoten (P2) befindet sich innerhalb des ersten Knotens (P1).

32: Es besteht keine Beziehung oder die beiden Knoten sind zwei Attribute desselben Elements.

Hinweis: Der Rückgabewert kann eine Kombination von Werten sein. Die Rückgabe von 20 bedeutet beispielsweise, dass p2 innerhalb von p1 (16) und p1 vor p2 (4) liegt.

Und [ie8- unterstützt nicht die Methode „compareDocumentPosition()“. Sie müssen stattdessen „contains“ verwenden. Die Methode „compareDocument()“ ist so leistungsstark, dass sie verwendet wird, um zu bestimmen, ob nodeB in einem anderen nodeA enthalten ist: nodeA.contains( nodeB )

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.