jquery mouseout mouseover 多次执行

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

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

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

 

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

查看 复制 打印 ?

1. <div id="test2" >  
2. <img src='test1.jpg'>  
3. </div>  
4.   
5. $("#test2").mouseleave(function(){  
6.  console.log('out');  
7.  }).mouseenter(function(){  
8.  console.log('in');  
9.  });  
10.   
11.  $("#test2").mouseout(function(){  
12.  console.log('out');  
13.  }).mouseover(function(){  
14.  console.log('in');  
15.  });  

上面二代码JS代码分别执行，执行的结果是一样的。mouseover，onmouseover，mouseenter一样，mouseout，onmouseout，mouseleave一样

2，多个内部元素，mouseleave，mouseenter只会执行一次

查看 复制 打印 ?

1. <div id="test2" >  
2.  <ul>  
3.  <li>test</li>  
4.  <li>test1</li>  
5.  <li>test2</li>  
6.  <li>test3</li>  
7.  <li>test4</li>  
8.  </ul>  
9. </div>  

如果将html代码换成ul这种形势，当鼠标进入，离开div时，mouseleave,mouseenter只会执行一次，而其他的，随着鼠标在ul的每个li之间进行滑动时，都会被执行。

转载于:https://www.cnblogs.com/huangshikun/p/6649095.html