欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JQuery事件中mouseover与mouseenter以及mouseout与mouseleave的区别详解

程序员文章站 2022-06-26 10:01:49
区别： 1.当被选元素没有子元素时，mouver与mouseenter的功能一样，当鼠标指针进入被选元素时，触发相应的处理函数。同理，mouseout和mouseleave，当鼠标指针移出被选元素时...

区别：

1.当被选元素没有子元素时，mouver与mouseenter的功能一样，当鼠标指针进入被选元素时，触发相应的处理函数。同理，mouseout和mouseleave，当鼠标指针移出被选元素时，触发相应的处理函数。

2.当被选元素包含子元素时，此时有很大的区别。不论鼠标指针移出或者移进被选元素还是子元素，mouseover事件都会触发，与之对应的是mouseout。而mouseenter事件，只有当鼠标指针移出或者移进被选元素时才会触发，与之对应的是mouseleave。

例如：

对于mouseover和mouseout，当鼠标指针进入被选元素内部时，触发mouseover方法的处理函数，接着当鼠标指针进入其子元素内部时，mouseover方法和mouseout方法都会触发，相对被选元素而言，此时处于离开状态(mouseout)，相对子元素而言，此时处于进入状态(mouseover)，当被移出子元素内部时，mouseover方法和mouseout方法都会触发，相对子元素而言，此时处于离开状态(mouseout)，相对被选元素而言，此时处于进入状态(mouseover)，移出被选元素内部，触发mouseout方法的处理函数。

对于mouseenter和mouseleave，当鼠标移进被选元素内部，mosueenter方法触发，接着移进子元素内部，无变化，就然后移出子元素内部，无变化，移出被选元素内部时，mouseleave方法触发。

举例源代码：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#p1,#p3{
				background-color:blue;
				width:300px;
				height:300px;
			    float:left;
			}
			
			#p2,#p4{
				background-color: red;
				width:200px;
				height:200px;
			}
			#p3{
				background-color:yellow;
				width:300px;
				height:300px;
			    float:left;
			}
			#p4{
				background-color:dodgerblue;
				width:200px;
				height:200px;
			}
		</style>
	</head>
	<script type="text/javascript" src="../../jquery/js/jquery-1.7.1.js"></script>
	<script type="text/javascript">
	$(function(){
            $("#p1")
            .mouseout(function(){
            	console.log("mouseout 离开")
            })
            .mouseover(function(){
            	console.log("mouseover 进入")
            })
              $("#p3")
		    .mouseenter(function(){
		    	console.log("mouseenter 进入");
		    })
		    .mouseleave(function(){
		    	console.log("mouseleave 离开")
		    })
			})
		  
	</script>
	<body>
			<p id="p1">
				p1....
				<p id=p2>
					p2....
				</p>
			</p>
			<p id="p3">
				p3....
				<p id="p4">
					p4....
				</p>
			</p>
	</body>
</html>

上一篇： 设计模式漫谈之状态模式

下一篇： CSS3属性box-shadow使用指南

推荐阅读