Home > Article > Web Front-end > How to understand the non-bubble of jQuery mouseenter method?

How to understand the non-bubble of jQuery mouseenter method?

黄舟Original: 2017-06-28 09:51:181085browse

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;);
    });    
});

**When the mouse moves into the child element, I thought only the background of the child element turns black because .mouseenter() does not bubble, but the result is that both the parent and child elements are It turned black. I don't understand. The mouseenter doesn't bubble. Then only the background of the child elements should turn black. Why has everything changed? Please explain! **

1) The fact that mouseenter does not bubble means that when an element captures the mouseenter event, its parent element will no longer be notified, and the parent element will not process the mouseenter time. 2) Regarding the question 2 mouseenter

//只要元素进入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;);
});

It still seems difficult to understand, so let’s take a look at what the bubbling mouseover looks like

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

When we run the above code, we can see that every time the mouse enters the child When an element triggers the mouseover event, it will bubble up to its parent element and execute the parent element's mouseover event listener - the displayed number will increase
. However, this will not happen if the mouseenter event listener is used - the displayed number will not increase.
And prevent bubbling-stopPropagation in the mouseover event listening function of the child element, so that the event of the parent element will not be called back

The above is the detailed content of How to understand the non-bubble of jQuery mouseenter method?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：In-depth understanding of mouseenter in jqueryNext article：In-depth understanding of mouseenter in jquery

See more

How to understand the non-bubble of jQuery mouseenter method?

Related articles