jquery ul li mouseout 事件冒泡的bug

今天碰到个jquery的mouseout事件的问题，弄了半天总算解决了。jquer ul li 好像绑定ul的mouseout事件，离开第一个li后就会触发。后来在网上查了下叫事件冒泡，改成使用mouseleave即可。mouseover也有冒泡。改用mouseenter。因为bind方法可以屏蔽浏览器的一些事件冒泡行为。另外，ie支持mouseenter,mouseleave事件，firefox等不支持，但通过jquery的这种方式后，所有浏览器均支持上面的语法。

 

html代码如下

<div id="nav">
       <ul class="nav1">
          <li><a href="#">111111111111</a></li>
          <li><a href="#">111111111111</a></li>
          <li><a href="#">111111111111</a></li>
       </ul>
       <ul class="nav2">
          <li><a href="#">222222222222</a></li>
          <li><a href="#">222222222222</a></li>
          <li><a href="#">222222222222</a></li>
       </ul>
       <ul class="nav3" style="border:10;">
          <li><a href="#">33333333333</a></li>
          <li><a href="#">33333333333</a></li>
          <li><a href="#">33333333333</a></li>
       </ul>
       <ul class="nav4">
          <li><a href="#">444444444444</a></li>
          <li><a href="#">444444444444</a></li>
          <li><a href="#">444444444444</a></li>
       </ul>
    </div>

 

一开始的绑定方法如下：

 

 

("#nav").mouseout(function() {
						$('.nav1').hide();	
						$('.nav2').hide();
						$('.nav3').hide();
						$('.nav4').hide();
				 });

 改为使用bind方法即可，代码如下：

$('#nav').bind("mouseleave",function(){
	$('.nav1').hide();	
	$('.nav2').hide();
	$('.nav3').hide();
	$('.nav4').hide();
});