jquery事件中mouseout與mouseover多次執行問題解決

jquery mouseout mouseover 我們是非常的好用了這個非常的好用但在使用過程中我們會碰到jquery mouseout mouseover 執行次數非常的多了，下面我們就一起來看看此問題解決方法。

用jquery，mouseout，mouseover，隨著滑鼠移動，事件被觸發了多次，換成js onmouseover，onmouseout也是一樣。最終的解決方法是，用jquery，mouseleave代替mouseout；mouseenter代替mouseover。
mouseleave，mouseenter滑鼠離開，進入最外層標籤時觸發事件。
mouseout，mouseover滑鼠離開，進入裡面標籤時觸發事件。

1，單一內部元素，無區別

<div id="test2" >  
<img  src=&#39;test1.jpg&#39; alt="jquery事件中mouseout與mouseover多次執行問題解決" >  
</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中文網其他相關文章！