Maison >interface Web >js tutoriel >Explication détaillée des événements de survol et de sortie de souris des éléments imbriqués jQuery

Explication détaillée des événements de survol et de sortie de souris des éléments imbriqués jQuery

黄舟original: 2017-06-28 13:56:581499parcourir

Aujourd'hui, en aidant les autres à résoudre un problème de survol et de retrait de la souris, j'ai découvert un problème auquel je ne m'attendais pas. J'ai le courage de le partager avec vous, experts. .

Problème : Il y a trois divs imbriqués. div111 est la couche la plus externe, div222 est la couche intermédiaire et div333 est la couche la plus interne.
Effet : Lorsque la souris est située au dessus du div, le survol du calque correspondant est déclenché. Lorsque l'attribut quitte le haut du div, le mouseout du calque correspondant est déclenché. (Par exemple : lorsque la souris passe de div111 aux sous-éléments div222, div333, l'événement mouseleave de div111 ne sera pas déclenché. A l'inverse, lorsque la souris passe des sous-éléments div222, div333 à div111, l'événement mouseenter de div111 ne sera pas déclenché,

Ce code résout également certains problèmes causés par le survol et la sortie de la souris dus au bouillonnement des éléments enfants

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

Là ? sont deux événements magiques dans jquery

L'un s'appelle mouseenter

L'autre est mouseleave

Mouseenter et mouseleave sont complètement inutiles pour l'imbrication

Non, Je pensais que c'était un gros problème. Il suffit de lier l'événement une fois et d'utiliser e.target pour déterminer sur quel élément il s'est produit. Le traitement basé sur l'élément économise des ressources

Le survol/la sortie de la souris bouillonne, donc cela provoquera naturellement. ce problème
Utilisez mouseenter/leave sous IE
Lors de votre inscription avec addEventListener sous d'autres navigateurs, transmettez simplement true dans le troisième paramètre

mouseenter/leave d'IE, lorsque la souris passe de div111 à div222, le Le mouseleave de div111 et le mouseenter de div222 seront déclenchés. À l'inverse, lorsque la souris passe de div222 à div111, le mouseleave de div222 et le mouseenter de div111 seront déclenchés. C'est complètement différent. Ils ne conviennent que pour. applications sans imbrication.
Le mode de capture des autres navigateurs ne sera pas plus simple que le mode bulle, et il n'est pas compatible avec IE. Mouseleave a été créé pour résoudre ce problème. Il peut également gérer le bouillonnement imbriqué. pas facile à utiliser !

Cela dépend de la situation

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée des appels inter-domaines Ajax liés à JAVA background_AJAXArticle suivant：Explication détaillée des appels inter-domaines Ajax liés à JAVA background_AJAX

Articles Liés

Voir plus