Solving the problem of multiple executions of mouseout and mouseover in jquery events

jquery mouseout mouseover We are very easy to use. This is very easy to use, but during use we will encounter jquery mouseout mouseover. The number of executions is very high. Let’s take a look. Workaround for this problem.

Using jquery, mouseout, mouseover, as the mouse moves, event is triggered multiple times, replaced by js onmouseover, onmouseout is also Same. The final solution is to use jquery, mouseleave instead of mouseout; mouseenter instead of mouseover.
mouseleave, mouseenter event is triggered when the mouse leaves and enters the outermost label.
mouseout, mouseover event is triggered when the mouse leaves and enters the tag inside.

1, single internal element, no difference

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

The above two codes of JS code are executed separately, and the execution result is the same. mouseover, onmouseover, mouseenter are the same, mouseout, onmouseout, mouseleave are the same

2, multiple internal elements, mouseleave, mouseenter will only be executed once

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

If you change the html code to ul, this situation , when the mouse enters or leaves the div, mouseleave and mouseenter will only be executed once, while the others will be executed as the mouse slides between each li of the ul.

The above is the detailed content of Solving the problem of multiple executions of mouseout and mouseover in jquery events. For more information, please follow other related articles on the PHP Chinese website!