mouseover与mouseenter的区别

请先看下面讲解，文章最后有源代码

页面上有4个div，div2是div1的子元素，div4是div3的子元素

给 div1 绑定了mouseover() 和 mouseout() 事件监听

给 div3 绑定了mouseenter() 和 mouseleave() 事件监听

页面是这样的

mouseover()与mouseout()

1.鼠标进入 div1 时

2.当鼠标进入div1的子元素 div2 时

控制台输出了 “mouseout离开” 这表示什么？？？

表示进入div1的子元素div2时，触发了离开div1的mouseout()事件，表示鼠标指针暂时离开了div1，然后又触发mouseover()鼠标进入事件。mouseover()鼠标进入事件触发了两次

mouseenter()与mouseleave()

1.当鼠标进入div3时，控制台输出“用mouseenter进入”，表示鼠标进入了div3触发了mouseenter()事件

2.当鼠标进入div3的子元素 div4 时 (注：黑色箭头代表鼠标指针)

控制台并没有变化，表示什么？

表示进入div3的子元素div4时，并没有触发div3的mouseleave()离开事件，表示鼠标指针并没有离开了div3，

mouseenter()鼠标进入事件触发了一次。

区别显而易见了吧

总结

mouseover(); 在鼠标指针移入子元素时也会再次触发, 对应mouseout();

mouseenter();鼠标指针只有在移入当前元素时才触发, 对应mouseleave();

页面中该用哪种自己决定，如果都没有子元素，那随便用哪个方法。

对文章有什么问题或者建议请大佬在评论区指出，或者联系QQ：675174745，欢迎打扰。

源代码：(记得修改引入jQuery库的路径)

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>mouseover和mouseenter的区别</title>
	</head>
	<style type="text/css">
		* {
			margin: 0px;
		}
		
		.div1 {
			position: absolute;
			width: 200px;
			height: 200px;
			top: 50px;
			left: 10px;
			background: olive;
		}
		
		.div2 {
			position: absolute;
			width: 100px;
			height: 100px;
			top: 50px;
			background: red;
		}
		
		.div3 {
			position: absolute;
			width: 200px;
			height: 200px;
			top: 50px;
			left: 230px;
			background: olive;
		}
		
		.div4 {
			position: absolute;
			width: 100px;
			height: 100px;
			top: 50px;
			background: yellow;
		}
		
		.divText {
			position: absolute;
			top: 330px;
			left: 10px;
		}
	</style>

	<body>

		<div class="divText">
			区分鼠标的mouseover和mouseenter事件
		</div>

		<div class="div1">
			div1.....
			<div class="div2">div2....</div>
		</div>

		<div class="div3">
			div3.....
			<div class="div4">div4....</div>
		</div>
<!--
	区别mouseover与mouseenter?
	* mouseover: 在移入子元素时也会触发, 对应mouseout
	* mouseenter: 只在移入当前元素时才触发, 对应mouseleave
	hover()使用的就是mouseenter()和mouseleave()
-->
		<script src="js/jquery-1.12.3.js" type="text/javascript"></script>
		<script type="text/javascript">
			//mouseover mouseout
			$(".div1").mouseover(function() {
				console.log("用mouseover进入")
			});
			$(".div1").mouseout(function() {
				console.log("用mouseout离开")
			});

			//mouseenter mouseleave
			$(".div3").mouseenter(function() {
				console.log("用mouseenter进入")
			});
			$(".div3").mouseleave(function() {
				console.log("用mouseleave离开")
			});
		</script>
	</body>

</html>

【jQuery】mouseover与mouseenter的区别