jQuery事件中mouseout和mouseover有子元素的情况
程序员文章站
2022-03-17 08:07:44
...
大家都熟悉mouseout 和 mouseover事件，就是鼠标移出和鼠标掠过事件，但是还是有部分人不知道在有子元素的情况下，同时还会鼠标的移出和掠过子元素的时候都会在中再一次触发。可以看个例子：
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>mouseout子元素的触发</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style>
#list{width:100px;padding:10px;border:1px solid #ccc;background:#FFF;}
#list ul{margin:0;padding:0;background:#333;}
#list ul li{list-style:none;margin-bottom:5px;}
#list ul li a:hover{background:#666;color:#FFF;}
</style>
</head>
<body>
<a href="#" id="showList">鼠标请过来</a>
<div id="list" style="display:none;">
<ul>
<li><a href="#">选项一</a></li>
<li><a href="#">选项二</a></li>
<li><a href="#">选项三</a></li>
<li><a href="#">选项四</a></li>
<li><a href="#">选项五</a></li>
</ul>
</div>
</body>
<script type="text/javascript">
$("#showList").bind("mouseover",function(){
$("#list").toggle('fast');
});
$("#list").bind("mouseout",function(){
$(this).slideUp('fast');
});
</script>
</html>
这个例子原意是想打开一个列表框然后选择一个选项。鼠标移开列表框的时候关闭，但是事实情况是鼠标只要移上列表框就关闭。原因就是，列表绑定了一个mouseout事件，因为该列表有很多子元素，所以同意会触发ul，li，的鼠标掠过事件，也就是说，当鼠标移出ul，li的时候同样会触发mouseout事件。
解决的方法有多种，本文就是用jquery对应的两个事件，mouseenter 和 mouseleave，
只要把mouseout事件名改成mouseleave，就大功告成了。嘿嘿，简单！jquery都想到了。^_^,
Mouseleave ：与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。例子
MouseEnter ：与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。
以上就是jQuery事件中mouseout和mouseover有子元素的情况的详细内容，更多请关注其它相关文章！
上一篇： JS 小demo之新建文件夹的实例教程
下一篇： 如何通过css3+html5实现纵向菜单