Comment comprendre la non-bulle de la méthode jQuery mouseenter ?-js tutoriel-php.cn

Comment comprendre la non-bulle de la méthode jQuery mouseenter ?

黄舟

Libérer： 2017-06-28 09:51:18

original

1147 Les gens l'ont consulté

Code :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQ--mouseenter测试</title>
<style>
*{margin: 0; padding: 0; color: #fff;}
div{width: 100px; height: 100px; padding-top: 20px; background: green; margin: 100px auto;}
p{width: 150px; height: 50px; background: red;}
</style>
<script src="jquery.js"></script> <!-- 1.9.0版 -->
</head>
<body>
    <div id="d">
        <p>子元素</p>
        父元素
    </div>
<script>
var a=0;
$(function(){ 
    $(&#39;#d&#39;).mouseenter(function(){    /*#d,父元素,当mouseenter时背景变为黑色*/ 
        $(this).css(&#39;background&#39;,&#39;#000&#39;);
    });
    $(&#39;#d p&#39;).mouseenter(function(){    /*#d p,子元素,当mouseenter时背景变为黑色*/      
        $(this).css(&#39;background&#39;,&#39;#000&#39;);
    });    
});

Copier après la connexion

** Lorsque la souris se déplace dans l'élément enfant, je pensais que seul l'arrière-plan de l'élément enfant devenait noir car .mouseenter() ne fait pas de bulles, mais le résultat est les deux parent et enfant. Les éléments sont tous devenus noirs. Je ne comprends pas. Le mouseenter ne fait pas de bulle. Alors seul l'arrière-plan des éléments enfants doit devenir noir. Pourquoi tout a-t-il changé ? Veuillez expliquer ! **

1) Le fait que mouseenter ne fasse pas de bulle signifie qu'après qu'un élément ait capturé l'événement mouseenter, son élément parent ne sera plus notifié et l'élément parent ne traitera pas l'heure de mouseenter 2) Concernant. la question 2 mouseenters

//只要元素进入div#d区域，mouseenter事件就会被触发
//一个mouse要进入一个子元素，必然经过其父元素，故鼠标达到子元素触发mouseenter后其父元素的mouseenter事件也会被触发
$(&#39;#d&#39;).mouseenter(function(){    /*#d,父元素,当mouseenter时背景变为黑色*/ 
    $(this).css(&#39;background&#39;,&#39;#000&#39;);
});
//只要元素进入div#d p区域，也就是div#d的子元素p区域是，mouseenter事件就会被触发
//但是此时div#d上的mouseenter事件监听不会再被触发，因为没有冒泡上去
$(&#39;#d p&#39;).mouseenter(function(){    /*#d p,子元素,当mouseenter时背景变为黑色*/      
    $(this).css(&#39;background&#39;,&#39;#000&#39;);
});

Copier après la connexion

semble encore difficile à comprendre, alors regardons à quoi ressemble le survol bouillonnant de la souris

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../script/jquery-2.1.3.min.js"></script>
    <script>
        $(function(){
            /*
            $(&#39;#d&#39;). mouseover(function(){
                $(this).css(&#39;background&#39;,&#39;orange&#39;);
                if(!$(this).data(&#39;data-count&#39;)){
                    $(this).data(&#39;data-count&#39;,1)
                }else{
                    $(this).data(&#39;data-count&#39;,$(this).data(&#39;data-count&#39;)+1);
                }
                $(this).find(&#39;span&#39;).text($(this).data(&#39;data-count&#39;));
            });

            $(&#39;#d p&#39;).mouseover(function(){
                $(this).css(&#39;background&#39;,&#39;yellow&#39;);
                if(!$(this).data(&#39;data-count&#39;)){
                    $(this).data(&#39;data-count&#39;,1)
                }else{
                    $(this).data(&#39;data-count&#39;,$(this).data(&#39;data-count&#39;)+1);
                }
                $(this).text($(this).data(&#39;data-count&#39;));
            });
            */
            $(&#39;#d&#39;). mouseenter(function(){
                $(this).css(&#39;background&#39;,&#39;orange&#39;);
                if(!$(this).data(&#39;data-count&#39;)){
                    $(this).data(&#39;data-count&#39;,1)
                }else{
                    $(this).data(&#39;data-count&#39;,$(this).data(&#39;data-count&#39;)+1);
                }
                $(this).find(&#39;span&#39;).text($(this).data(&#39;data-count&#39;));
            });

            $(&#39;#d p&#39;).mouseenter(function(){
                $(this).css(&#39;background&#39;,&#39;yellow&#39;);
                if(!$(this).data(&#39;data-count&#39;)){
                    $(this).data(&#39;data-count&#39;,1)
                }else{
                    $(this).data(&#39;data-count&#39;,$(this).data(&#39;data-count&#39;)+1);
                }
                $(this).text($(this).data(&#39;data-count&#39;));
            });

        });

    </script>
</head>
<body>
<div id="d" style="width:200px;height:200px;background-color: greenyellow">
    <span>父元素</span>
    <p style="padding:5px;width:100px;height:100px;background-color: red;display:block">子元素</p>
</div>
</body>
</html>

Copier après la connexion

En exécutant le code ci-dessus, nous pouvons voir qu'à chaque fois Lorsque l'événement mouseover est déclenché lorsque la souris entre dans l'élément enfant, il remontera jusqu'à son élément parent et exécutera l'écouteur d'événement mouseover de l'élément parent - le nombre affiché augmentera
Si vous passez à l'écouteur d'événement mouseenter, cela. n'arrivera pas - afficher Le nombre n'augmente pas
et si bubbling-stopPropagation est empêché dans la fonction d'écoute des événements de survol de la souris de l'élément enfant, l'événement de l'élément parent ne sera pas rappelé

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!