jquery mouseout mouseover 多次执行

张映 发表于 2016-03-16

分类目录: nodejs/vue/js/jquery

标签:, , , , ,

用jquery,mouseout,mouseover,随着鼠标移动,事件被触发了多次,换成js onmouseover,onmouseout也是一样。最终的解决办法是,用jquery,mouseleave代替mouseout;mouseenter代替mouseover。

mouseleave,mouseenter鼠标离开,进入最外层标签时触发事件。

mouseout,mouseover鼠标离开,进入里面标签时触发事件。

1,单个内部元素,无区别

<div id="test2" >
<img src='test1.jpg'>
</div>

$("#test2").mouseleave(function(){
 console.log('out');
 }).mouseenter(function(){
 console.log('in');
 });

 $("#test2").mouseout(function(){
 console.log('out');
 }).mouseover(function(){
 console.log('in');
 });

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



转载请注明
作者:海底苍鹰
地址:http://blog.51yip.com/jsjquery/1784.html