Jquery鼠标事件包含子元素
在用Jquery做一个导航特效时出现了问题,做的导航类似于京东的鼠标放上去导航。基本一样，主菜单和鼠标放上去显示子菜单。由于导航出来的内容已经是已知固定数据,所以不用ajax调用数据直接写div的隐藏和显示，有两种方法，一是将已知数据写一个js数组，动态的新建层并添加数据放到要显示导航的后面，一种是将所有的数据写不同的层并隐藏，到显示的时候直接显示并更改对应的position即可。因为懒采用的是第二种方法,结果更费劲，中间出了个问题，不过也学习了。下面将我的过程说一下
导航假设如下：
<div id="foraspcn">
<li style="width:300px; height:100px; background-color:#CCC;"><a href="http://www.forasp.cn/">网站制作学习网
</a></li>
<li style="width:300px; height:100px;"><a href="http://www.forasp.cn/">网站制作学习网1</a></li>
...
</div>
显示二级导航
<div class="wwwforaspcn" style="display:none;">
<li><a href="http://www.forasp.cn/asp.html">ASP版块</a></li>
<li><a href="http://www.forasp.cn/js.html">javascript版块</a></li>
</div>
<div class="wwwforaspcn" style="display:none;">
<li><a href="http://www.forasp.cn/asp.html">ASP版块</a></li>
<li><a href="http://www.forasp.cn/asp.html">ASP版块</a></li>
</div>...
当开始的时候以为很简单写代码如下
<script language="javascript">
$(function(){
$("#foraspcn >li").each(function(i){
$(this).mouseover(function(){
$(".wwwforaspcn:eq("+i+")").show("slow");
});
$(this).mouseout(function(){
$(".wwwforaspcn:eq("+i+")").hide("slow");
});
});
});
</script>
当鼠标在第一个li和其里面的链接a进行来回移动时发现，当鼠标从a到li和li到a先触发mouseout，然后再触发mouseover事件。
后来发现a 和li在属于父子关系中不能可以继承原来的mouseover事件但是，从鼠标从li到a和从a到li中是不同的对象触发了事件。
所以有了中间的切换BUG(也不能说是bug，应该是未能正确表示)。
后来查询网络，有的说是禁止冒泡，有的是判断一下是不是子元素，但是不管是禁止冒泡和子元素判断都是两个不同的对象触发了
事件。
禁止冒泡 event.stopPropagation(); 但是我的是向下执行的，不存在冒泡
再是通过绑定事件可以将子元素等一起绑定事件，通过测是可以绑定，但是仍然存在a和li是两个元素触发两次事件的情况。
$('div').bind("mouseover",function(){
// do something on mouseenter
});
后来在看jQuer手册时，发现mouseenter事件和mouseleave事件，这两个方法是当鼠标进入到对象区域和离开对象区域，当鼠标在a
上面时，也会在li的区域，经过测是成功。
将上面js代码改为
$("#foraspcn >li").each(function(i){
$(this).mouseenter(function(){
$(".wwwforaspcn:eq("+i+")").show("slow");
});
$(this).mouseleave(function(){
$(".wwwforaspcn:eq("+i+")").hide("slow");
});
});
经过测试，成功的实现了想要的效果。（这里测测试没有经过定位，去掉了鼠标在保持显示二级导航事件）
查看对比效果：Jquery鼠标事件包含子元素