Résoudre le problème des exécutions multiples de mouseout et mouseover dans les événements jquery

jquery mouseout mouseover Nous sommes très faciles à utiliser, mais pendant l'utilisation, nous rencontrerons jquery mouseout mouseover Le nombre d'exécutions est très élevé. Solution de contournement pour ce problème.

En utilisant jquery, mouseout, mouseover, lorsque la souris bouge, l'événement est déclenché plusieurs fois, remplacé par js onmouseover, onmouseout est aussi pareil. La solution finale consiste à utiliser jquery, mouseleave au lieu de mouseout ;
mouseleave, l'événement mouseenter est déclenché lorsque la souris quitte et entre dans l'étiquette la plus externe.
mouseout, l'événement mouseover est déclenché lorsque la souris quitte et entre dans la balise intérieure.

1, seul élément interne, aucune différence

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

Les deux codes ci-dessus du code JS sont exécutés séparément et le résultat de l'exécution est le même. mouseover, onmouseover, mouseenter sont les mêmes, mouseout, onmouseout, mouseleave sont les mêmes

2, plusieurs éléments internes, mouseleave, mouseenter ne seront exécutés qu'une seule fois

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

Si vous remplacez le code html avec ul this Dans cette situation, lorsque la souris entre ou sort du div, mouseleave et mouseenter ne seront exécutés qu'une seule fois, tandis que les autres seront exécutés lorsque la souris glissera entre chaque li du ul.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!