jqueryイベントでmouseoutとmouseoverが複数実行される問題を解決する

jquery マウスアウト マウスオーバー これは非常に使いやすいですが、使用中に何度も実行される jquery マウスアウト マウスオーバーが発生します。この問題の解決策を見てみましょう。

jquery、mouseout、mouseover を使用すると、マウスが移動すると event が複数回トリガーされます。js に置き換えると、onmouseover と onmouseout にも同じことが当てはまります。最後の解決策は、mouseout の代わりに jquery、mouseleave を使用することです。
mouseleave、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;);  
 });

上記の 2 つの JS コードは別々に実行され、実行結果は同じです。 Mouseover、onmouseover、mouseenter は同じです、mouseout、onmouseout、mouseleave は同じです

2、複数の内部要素、mouseleave、mouseenter は 1 回だけ実行されます

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

HTML コードが ul に置き換えられると、マウスが入ったときとleft the div 、mouseleave、mouseenter は 1 回だけ実行され、その他はマウスが ul の各 li の間をスライドするときに実行されます。

以上がjqueryイベントでmouseoutとmouseoverが複数実行される問題を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。