jQuery mouseenter 메소드의 버블이 없는 것을 이해하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

jQuery mouseenter 메소드의 버블이 없는 것을 이해하는 방법은 무엇입니까?

黄舟

풀어 주다： 2017-06-28 09:51:18

원래의

1126명이 탐색했습니다.

코드:

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

로그인 후 복사

**마우스가 자식 요소로 이동했을 때 .mouseenter()가 버블링되지 않아서 자식 요소의 배경만 검게 변한 줄 알았는데 결과적으로 부모와 자식 요소가 모두 검게 변했습니다. . 이해가 안 돼요. 그러면 자식 요소의 배경만 검은색으로 바뀌어야 합니까? 설명해주세요! **

1) mouseenter가 버블링되지 않는다는 사실은 요소가 mouseenter 이벤트를 캡처한 후 해당 상위 요소가 더 이상 알림을 받지 않으며 상위 요소가 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;);
});

로그인 후 복사

아직도 이해하기 어려운 것 같으니 버블링 마우스오버가 어떻게 보이는지 살펴보겠습니다

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

로그인 후 복사

위 코드를 실행하면 마우스가 하위 요소에 들어갈 때마다 마우스오버 이벤트가 트리거되는 것을 볼 수 있습니다. 상위 요소로 버블링되고 상위 요소의 마우스 오버 이벤트 모니터링을 입력하고 실행합니다. 표시되는 숫자는 증가합니다
. 그러나 마우스 입력 이벤트 모니터링으로 전환하면 이러한 현상이 발생하지 않습니다. 표시되는 숫자는 증가하지 않습니다
하위 요소의 마우스오버 이벤트 수신 기능에서 위험을 방지합니다. Soak -stopPropagation, 상위 요소의 이벤트는 다시 호출되지 않습니다

위 내용은 jQuery mouseenter 메소드의 버블이 없는 것을 이해하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!