您的位置：首页 > Web前端 > JQuery

jquery的mouseover/mouseleave和mouseenter/mouseout区别,横向多级滑动菜单

2013-08-05 10:53 567 查看

在写多级滑动菜单时体验了一把mouseenter/mouseleave和mouseover/mouseout区别.主要是mouse进入子元素时父元素的事件触发的区别。

1.先说说mouseover/mouseout。

1.1当mouse进入父元素时触发父元素mouseover事件;

1.2当mouse从父元素进入到子元素时，会先触发父元素的mouseout事件=>触发子元素的mouseover事件=>如子元素mouseover事件处理中不返回false则会把mouseover事件传递给父元素，则父元素也触发了一次mouseover;

1.3当mouse从子元素A进入到另一个相临的子元素B时，会解发A的mouseout事件=>A的mouseout事件可以传递给父元素=>触发B的mouseover事件=>B的mouseover事件可以传给元素。

1.4当mouse从子元素进入到父元素时，会触发子元素mouseout事件=>子元素mouseout事件可以传递给父元素=>解发父元素的mouseover事件。

1.5当mouse从子元素移到外面，即也移到父元素外面，会触发子元素mouseout事件=>子元素mouseout事件可以传递给父元素;

2.再说说mouseenter/mouseout。这两个事件要jquery1.4以后版本才支持。

2.1当mouse进入父元素时触发父元素mouseenter事件;

2.2当mouse从父元素进入到子元素时，只触发子元素的mouseenter事件;

2.3当mouse从子元素A进入到另一个相临的子元素B时，会解发A的mouseleave事件=>触发B的mouseenter事件;

2.4当mouse从子元素进入到父元素时，会触发子元素mouseleave事件=>解发父元素的mouseenter事件。

2.5当mouse从子元素移到外面，即也移到父元素外面，会触发子元素mouseleave事件=>子元素mouseleave事件此时可以传递给父元素;

区别：从上面可以看出:两组事件的第2、3，4种情况时有所不同。则在父元素内部的元素间移动时触发的mouseover/mouseout事件可以传递给父元素，但mouseenter/mouseleave不可以传递给父元素。从父元素进入子元素时会先触发父元素的mouseout事件，但不会触发父元素的mouseleave事件。从子元素移动到外面时，子元素的mouseout和mouseleave事件都可以传递给父元素。
以下为本人写的横向多级滑动菜单。只做效果，不过多渲染。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>多级菜单</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
* {margin:0; padding:0;}
li{list-style-type:none;}
#menu {margin-left:20px;}
#menu li {width:100px; height:30px;background-color:#CCC;}
#menu a{display:block; width:100px; height:30px; line-height:30px; text-align:center;  color:#FFF;
background-color:#aaa; }
#menu>ul>li {float:left; margin:0 5px;}
#menu ul ul{display:none;}
#menu ul ul ul {height:0px; position:relative; left:100px; top:-30px;}
#menu ul ul li{border:1px solid #000;}

</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">一级1</a>
<ul>
<li><a href="#">二级11</a></li>
</ul>
</li>
<li><a href="#">一级2</a>
<ul>
<li><a href="#">二级21</a></li>
<li><a href="#">二级22</a></li>
<li><a href="#">二级23</a></li>
</ul>
</li>
<li><a href="#">一级3</a>
<ul>
<li><a href="#">二级31</a>
<ul>
<li><a href="#">三级311</a></li>
<li><a href="#">三级312</a>
<ul>
<li><a href="#">四级3121</a></li>
<li><a href="#">四级3122</a></li>
</ul>
</li>
<li><a href="#">三级313</a></li>
</ul>
</li>
<li><a href="#">二级32</a></li>
<li><a href="#">二级33</a></li>
</ul>
</li>
</ul>
</div>
<div style="clear:both;">
<p id='msg'></p>

<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">

$(function(){

$("#menu li").mouseenter(function(){
$(this).children('ul').slideDown(300);

var msg = "mouseenter"+$(this).children("a").text();
$("#msg").html($("#msg").html()+msg+"<br />");

});
$("#menu li").mouseleave(function(){
$(this).children('ul').stop(true,true).hide();

var msg = "mouseleave"+$(this).children("a").text();
$("#msg").html($("#msg").html()+msg+"<br />");
});
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航