Detailed explanation of mouseover and mouseout events of jQuery nested elements-JS Tutorial-php.cn

Detailed explanation of mouseover and mouseout events of jQuery nested elements

黄舟

Release： 2017-06-28 13:56:58

Original

1463 people have browsed it

Today, while helping others solve a problem about mouseover and mouseout, I discovered a problem that I didn't expect. I'm brave enough to share it with you, experts. .

Problem: There are three layers of nested divs. div111 is the outermost layer, div222 is the middle layer, and div333 is the innermost layer.
Effect: When the mouse is above the div, the mouseover of the corresponding layer is triggered. When the attribute leaves the top of the div, the mouseout of the corresponding layer is triggered. (For example: when the mouse moves from div111 to the sub-elements div222, div333, the mouseleave event of div111 will not be triggered. Conversely, when the mouse moves from the sub-elements div222, div333 to div111, the mouseenter event of div111 will not be triggered.

This code also solves some problems caused by mouseover and mouseout due to the bubbling of child elements. I wonder if there is a better solution?

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

Copy after login

There are two magical events in jquery

One is called mouseenter

The other is called mouseleave

mouseenter and mouseleave cannot achieve this effect at all. For nesting, they are useless.

No, I thought it was a big problem. Just bind the event once and use e.target to determine which element it happened on. Processing based on the element saves resources.

mouseover/out is bubbling, so it will naturally cause this problem
Use mouseenter/leave under IE
When registering with addEventListener under other browsers, just pass true in the third parameter

IE mouseenter/leave, when the mouse moves from div111 to div222, the mouseleave of div111 and the mouseenter of div222 will be triggered. Conversely, when the mouse moves from div222 to div111, the mouseleave of div222 and the mouseenter of div111 will be triggered, which does not meet the requirements at all. , they are only suitable for applications without nesting.
The capture mode of other browsers will not be simpler than the bubble mode, and it is not compatible with IE.

But mouseenter and mouseleave are not. It was created to solve this problem. It can also handle nested bubbling.
Jquery is not easy to use! I think it depends on the situation.

There is no difference between

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

Copy after login

and

$().mouseover(function(event){  
    if(!$(this).data(&#39;mouseover&#39;).mouseover){  
        $(this).data(&#39;mouseover&#39;, {mouseover: true});  
        //do something  
    }  
    event.stopPropagation();  
});

Copy after login

The above is the detailed content of Detailed explanation of mouseover and mouseout events of jQuery nested elements. For more information, please follow other related articles on the PHP Chinese website!