Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Mouseover- und Mouseout-Ereignisse von verschachtelten jQuery-Elementen

Detaillierte Erläuterung der Mouseover- und Mouseout-Ereignisse von verschachtelten jQuery-Elementen

黄舟Original: 2017-06-28 13:56:581453Durchsuche

Als ich heute anderen bei der Lösung eines Mouseover- und Mouseout-Problems half, entdeckte ich ein Problem, mit dem ich nicht gerechnet hatte. Ich bin mutig genug, es mit Ihnen, Experten, zu teilen. .

Problem: Es gibt drei verschachtelte Divs. div111 ist die äußerste Schicht, div222 ist die mittlere Schicht und div333 ist die innerste Schicht.
Effekt: Wenn sich die Maus über dem Div befindet, wird der Mouseover der entsprechenden Ebene ausgelöst. Wenn das Attribut den oberen Rand des Divs verlässt, wird der Mouseout der entsprechenden Ebene ausgelöst. (Zum Beispiel: Wenn sich die Maus von div111 zu den Unterelementen div222, div333 bewegt, wird das Mouseleave-Ereignis von div111 nicht ausgelöst. Umgekehrt wird das Mouseenter-Ereignis von div111 ausgelöst, wenn sich die Maus von den Unterelementen div222, div333 zu div111 bewegt div111 wird nicht ausgelöst,

Dieser Code löst auch einige Probleme, die durch Mouseover und Mouseout aufgrund des Sprudelns untergeordneter Elemente verursacht werden.

<!DOCTYPE html>        
<html>        
    <head>        
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        
        <title>test</title>        
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>        
        <style>        
            #div111{        
                width:200px; height :200px ; background :red; margin :100px auto auto 100px; border: 2px solid white;   
            }        
            #div222{        
                width:100px; height :100px; background :yellow; border: 2px solid white; 
            }        
            #div333{        
                width:50px; height :50px; background :blue; border: 2px solid white; 
            }
        </style>        
    </head>        
    <body>        
        <div id="div111">         
            <div id="div222">         
                <div id="div333"></div>         
            </div>         
        </div>    
        <div id="log"></div>         
        <script type ="text/javascript" >         
            function mouse_over(event){    
                var elem = $(event.currentTarget),  
                    fromElem = $(event.relatedTarget);  
                if(elem.has(fromElem).length === 0 || !fromElem.is(elem)){
                	elem.css(&#39;border-color&#39;, &#39;green&#39;);
                    log(elem.attr(&#39;id&#39;), event.type);
                }  
            };      
            function mouse_out(event){    
                var elem = $(event.currentTarget),  
                    toElem = $(event.relatedTarget);
                if(elem.has(toElem).length === 0 || !toElem.is(elem)){
                	elem.css(&#39;border-color&#39;, &#39;white&#39;);
                    log(elem.attr(&#39;id&#39;), event.type);
                }  
            };
            function log(id, type){
            	$("#log").append("<div><span>" + id + "触发了<strong><font color=&#39;red&#39;>" + type + "</font></strong>事件</span></div>");  
            }
            $(&#39;#div111&#39;).mouseover(mouse_over);      
            $(&#39;#div222&#39;).mouseover(mouse_over);      
            $(&#39;#div333&#39;).mouseover(mouse_over);      
            $(&#39;#div111&#39;).mouseout(mouse_out);      
            $(&#39;#div222&#39;).mouseout(mouse_out);      
            $(&#39;#div333&#39;).mouseout(mouse_out);  
        </script>         
    </body>        
</html>

Da sind zwei magische Ereignisse in jquery

Eines heißt Mouseenter

Das andere ist Mouseleave

Mouseenter und Mouseleave sind zum Verschachteln völlig nutzlos

Nein, Ich dachte, es sei ein großes Problem. Binden Sie das Ereignis einfach einmal und ermitteln Sie mit e.target, auf welchem Element es stattgefunden hat. Die Verarbeitung basierend auf dem Element spart Ressourcen dieses Problem

Mouseenter/leave unter IE verwenden

Bei der Registrierung mit addEventListener unter anderen Browsern einfach true im dritten Parameter übergeben

Mouseenter/leave von IE, wenn sich die Maus von div111 nach div222 bewegt, wird die Mouseleave von div111 und Mouseenter von div222 werden ausgelöst, wenn sich die Maus von div222 zu div111 bewegt. Es ist völlig unterschiedlich, dass sie die Anforderungen erfüllen Anwendungen ohne Verschachtelung.

Der Capture-Modus anderer Browser ist nicht einfacher als der Bubble-Modus und er ist nicht mit dem IE kompatibel. Mouseleave ist auch in YUI verfügbar und kann verschachteltes Bubbling verarbeiten.

Jquery ist nicht einfach zu verwenden

Es kommt auf die Situation an

und

$().mouseenter(function(){  
    //do something  
});

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Mouseover- und Mouseout-Ereignisse von verschachtelten jQuery-Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung des domänenübergreifenden Ajax-Aufrufs von JAVA im Zusammenhang mit Hintergrund_AJAXNächster Artikel：Detaillierte Erläuterung des domänenübergreifenden Ajax-Aufrufs von JAVA im Zusammenhang mit Hintergrund_AJAX

In Verbindung stehende Artikel

Mehr sehen