jQuery 중첩 요소의 마우스 오버 및 마우스 아웃 이벤트에 대한 자세한 설명-JS 튜토리얼-php.cn

jQuery 중첩 요소의 마우스 오버 및 마우스 아웃 이벤트에 대한 자세한 설명

黄舟

풀어 주다： 2017-06-28 13:56:58

원래의

1453명이 탐색했습니다.

오늘 마우스오버 및 마우스아웃 문제를 해결하는 데 도움을 주던 중에 예상치 못한 문제를 발견하게 되어 용기를 내어 전문가 여러분과 공유합니다. .

문제: 세 개의 중첩된 div 레이어가 있습니다. div111은 가장 바깥쪽 레이어, div222는 중간 레이어, div333은 가장 안쪽 레이어입니다.
효과: div 위에 마우스를 위치시키면 해당 레이어에 마우스오버가 발생하고, 해당 속성이 div 상단을 벗어나면 해당 레이어에서 마우스아웃이 발생합니다. (예: div111에서 하위 요소인 div222, div333으로 마우스가 이동하면 div111의 mouseleave 이벤트가 발생하지 않습니다. 반대로, 하위 요소인 div222, div333에서 div111로 마우스가 이동하면 div111의 mouseleave 이벤트가 발생합니다. 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>

로그인 후 복사

두 가지 마법의 이벤트가 있습니까? jquery에서는

하나는 mouseleave입니다.

mouseenter와 mouseleave는 중첩에는 전혀 쓸모가 없습니다. 그냥 바인딩하면 됩니다. 이벤트를 한 번 사용하고 e.target을 사용하면 어떤 요소가 구체적으로 발생하는지 확인할 수 있으며 해당 요소를 기반으로 처리하면 리소스가 절약됩니다.

마우스오버/아웃이 발생하므로 자연스럽게 이 문제가 발생합니다. 다른 브라우저에서 사용하세요. addEventListener를 등록할 때

IE의 mouseenter/leave에 true를 전달하면 됩니다. 마우스가 div111에서 div222로 이동하면 div111의 mouseleave가 트리거되고 반대로 div222의 mouseenter가 트리거됩니다. div222에서 div111로 이동하면 div222의 mouseleave 및 div111의 mouseenter 트리거가 요구 사항을 전혀 충족하지 않습니다. 이는 중첩이 없는 애플리케이션에만 적합합니다.

다른 브라우저의 캡처 모드는 이보다 더 쉽지 않습니다.

하지만 mouseenter와 mouseleave도 중첩된 버블링을 처리할 수 있습니다.

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

로그인 후 복사

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

로그인 후 복사

위 내용은 jQuery 중첩 요소의 마우스 오버 및 마우스 아웃 이벤트에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!