Rumah >hujung hadapan web >tutorial js >jquery事件中mouseout与mouseover多次执行问题解决

jquery事件中mouseout与mouseover多次执行问题解决

黄舟
黄舟asal
2017-06-28 13:19:092379semak imbas

jquery mouseout mouseover 我们是非常的好用了这个非常的好用但在使用过程中我们会碰到jquery mouseout mouseover 执行次数非常的多了,下面我们就一起来看看此问题解决办法。

用jquery,mouseout,mouseover,随着鼠标移动,事件被触发了多次,换成js onmouseoveronmouseout也是一样。最终的解决办法是,用jquery,mouseleave代替mouseout;mouseenter代替mouseover。
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;);  
 });

上面二代码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之间进行滑动时,都会被执行。

Atas ialah kandungan terperinci jquery事件中mouseout与mouseover多次执行问题解决. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn