코드:
<!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(){ $('#d').mouseenter(function(){ /*#d,父元素,当mouseenter时背景变为黑色*/ $(this).css('background','#000'); }); $('#d p').mouseenter(function(){ /*#d p,子元素,当mouseenter时背景变为黑色*/ $(this).css('background','#000'); }); });
**마우스가 자식 요소로 이동했을 때 .mouseenter()가 버블링되지 않아서 자식 요소의 배경만 검게 변한 줄 알았는데 결과적으로 부모와 자식 요소가 모두 검게 변했습니다. . 이해가 안 돼요. 그러면 자식 요소의 배경만 검은색으로 바뀌어야 합니까? 설명해주세요! **
1) mouseenter가 버블링되지 않는다는 사실은 요소가 mouseenter 이벤트를 캡처한 후 해당 상위 요소가 더 이상 알림을 받지 않으며 상위 요소가 mouseenter 시간을 처리하지 않음을 의미합니다. 질문
//只要元素进入div#d区域,mouseenter事件就会被触发 //一个mouse要进入一个子元素,必然经过其父元素,故鼠标达到子元素触发mouseenter后其父元素的mouseenter事件也会被触发 $('#d').mouseenter(function(){ /*#d,父元素,当mouseenter时背景变为黑色*/ $(this).css('background','#000'); }); //只要元素进入div#d p区域,也就是div#d的子元素p区域是,mouseenter事件就会被触发 //但是此时div#d上的mouseenter事件监听不会再被触发,因为没有冒泡上去 $('#d p').mouseenter(function(){ /*#d p,子元素,当mouseenter时背景变为黑色*/ $(this).css('background','#000'); });
아직도 이해하기 어려운 것 같으니 버블링 마우스오버가 어떻게 보이는지 살펴보겠습니다
<!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(){ /* $('#d'). mouseover(function(){ $(this).css('background','orange'); if(!$(this).data('data-count')){ $(this).data('data-count',1) }else{ $(this).data('data-count',$(this).data('data-count')+1); } $(this).find('span').text($(this).data('data-count')); }); $('#d p').mouseover(function(){ $(this).css('background','yellow'); if(!$(this).data('data-count')){ $(this).data('data-count',1) }else{ $(this).data('data-count',$(this).data('data-count')+1); } $(this).text($(this).data('data-count')); }); */ $('#d'). mouseenter(function(){ $(this).css('background','orange'); if(!$(this).data('data-count')){ $(this).data('data-count',1) }else{ $(this).data('data-count',$(this).data('data-count')+1); } $(this).find('span').text($(this).data('data-count')); }); $('#d p').mouseenter(function(){ $(this).css('background','yellow'); if(!$(this).data('data-count')){ $(this).data('data-count',1) }else{ $(this).data('data-count',$(this).data('data-count')+1); } $(this).text($(this).data('data-count')); }); }); </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 중국어 웹사이트의 기타 관련 기사를 참조하세요!