jQueryのネストされた要素のmouseoverイベントとmouseoutイベントの詳細な説明-jsチュートリアル-php.cn

jQueryのネストされた要素のmouseoverイベントとmouseoutイベントの詳細な説明

黄舟

リリース： 2017-06-28 13:56:58

オリジナル

1453 人が閲覧しました

今日、他の人がマウスオーバーとマウスアウトに関する問題を解決するのを手伝っていたときに、予想していなかった問題を発見しました。勇気を出して専門家の皆さんと共有します。。

問題: ネストされた div の層が 3 つあります。 div111 が最外層、div222 が中間層、div333 が最内層です。
効果: マウスが div の上にあると、対応するレイヤーのマウスオーバーがトリガーされ、属性が div の上部から離れると、対応するレイヤーのマウスアウトがトリガーされます。 (例: マウスが div111 からサブ要素 div222、div333 に移動した場合、div111 の Mouseleave イベントはトリガーされません。逆に、マウスがサブ要素 div222、div333 から div111 に移動した場合、div111 の Mouseenter イベントはトリガーされません) div111 はトリガーされません

同時に、子要素のバブリングによるマウスオーバーとマウスアウトによって引き起こされるいくつかの問題も解決します

<!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>

ログイン後にコピー

2 つの魔法のイベントがあります。 jqueryでは

1つはmouseenterと呼ばれます

もう1つはmouseleaveです

mouseenterとmouseleaveはネストの場合はまったく役に立ちません

いいえ、それは大きな問題だと思いました。イベントを一度実行して e.target を使用すると、具体的にどの要素が発生したかを判断でき、その要素に基づいて処理することでリソースが節約されます

マウスオーバー/アウトはバブリングするため、当然この問題が発生します
IE ではマウスエンター/リーブを使用してください
他のブラウザではaddEventListenerを登録する際に

IEのmouseenter/leaveにtrueを渡すと、マウスがdiv111からdiv222に移動すると、div111のmouseleaveとdiv222のmouseenterがトリガーされます。 div222 から div111 に移動すると、div222 のマウスリーフと div111 のマウスエンターがトリガーされます。これらは、ネストのないアプリケーションにのみ適しています。
他のブラウザーのキャプチャモードを実現するのはそれほど簡単ではありません。

それは状況に応じて異なります。

以上がjQueryのネストされた要素のmouseoverイベントとmouseoutイベントの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。