jquery 이벤트에서 mouseout 및 mouseover가 여러 번 실행되는 문제 해결

jquery mouseout mouseover 사용하기 매우 쉽습니다. 그러나 사용하는 동안 이 문제에 대한 해결책을 살펴보겠습니다.

jquery, mouseout, mouseover를 사용하면 마우스가 움직일 때 event가 여러 번 트리거되고 js로 대체될 때 onmouseover 및 onmouseout도 마찬가지입니다. 최종 해결책은 mouseout 대신 jquery, mouseleave를 사용하고 mouseover 대신 mouseenter를 사용하는 것입니다.
mousleave, mouseenter 이벤트는 마우스가 가장 바깥쪽 레이블을 떠나거나 들어갈 때 트리거됩니다.
mouseout, mouseover 이벤트는 마우스가 내부 태그에서 나가고 들어갈 때 트리거됩니다.

1, 단일 내부 요소, 차이 없음

<div id="test2" >  
<img src=&#39;test1.jpg&#39;>  
</div>  
  
$("#test2").mouseleave(function(){  
 console.log(&#39;out&#39;);  
 }).mouseenter(function(){  
 console.log(&#39;in&#39;);  
 });  
  
 $("#test2").mouseout(function(){  
 console.log(&#39;out&#39;);  
 }).mouseover(function(){  
 console.log(&#39;in&#39;);  
 });

위 두 JS 코드 코드는 별도로 실행되며 실행 결과는 동일합니다. mouseover, onmouseover, mouseenter는 동일하고 mouseout, onmouseout, mouseleave는 동일합니다

2 여러 내부 요소, mouseleave, mouseenter는 한 번만 실행됩니다

<div id="test2" >  
 <ul>  
 <li>test</li>  
 <li>test1</li>  
 <li>test2</li>  
 <li>test3</li>  
 <li>test4</li>  
 </ul>  
</div>

html 코드를 ul로 바꾸면 마우스가 입력되고 div, mouseleave, mouseenter는 한 번만 실행되고 나머지는 ul의 각 li 사이에서 마우스가 슬라이드되면서 실행됩니다.

위 내용은 jquery 이벤트에서 mouseout 및 mouseover가 여러 번 실행되는 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!