Lösung des Problems der mehrfachen Ausführung von Mouseout und Mouseover in JQuery-Ereignissen

jquery Mouseout Mouseover Wir sind sehr einfach zu bedienen, aber während der Verwendung werden wir auf eine sehr hohe Anzahl von Ausführungen stoßen. Problemumgehung für dieses Problem.

Mit JQuery, Mouseout, Mouseover wird das Ereignis bei Bewegung der Maus mehrmals ausgelöst und durch js onmouseover, onmouseout ersetzt auch das Gleiche. Die endgültige Lösung besteht darin, jquery, Mouseleave statt Mouseout zu verwenden; Mouseenter statt Mouseover.
Das Ereignis „Mouseleave, MouseEnter“ wird ausgelöst, wenn die Maus das äußerste Etikett verlässt und betritt.
Mouseout, Mouseover-Ereignis wird ausgelöst, wenn die Maus das Inside-Tag verlässt und betritt.

1, einzelnes internes Element, kein Unterschied

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

Die beiden oben genannten Codes des JS-Codes werden separat ausgeführt und das Ausführungsergebnis ist das gleiche. Mouseover, Onmouseover, Mouseenter sind gleich, Mouseout, Onmouseout, Mouseleave sind gleich

2, mehrere interne Elemente, Mouseleave, Mouseenter werden nur einmal ausgeführt

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

Wenn Sie das ersetzen HTML-Code mit ul this In dieser Situation werden Mouseleave und Mouseenter nur einmal ausgeführt, wenn die Maus das div betritt oder verlässt, während die anderen ausgeführt werden, wenn die Maus zwischen den einzelnen li des ul gleitet.

Das obige ist der detaillierte Inhalt vonLösung des Problems der mehrfachen Ausführung von Mouseout und Mouseover in JQuery-Ereignissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!