前言
自己做下拉菜单的时候，突然发现mouseover和mouseenter事件都可以，但是一查之后发现他们两个还是有区别的。所以写了这篇文章记录一下，希望对大家有帮助。
mouseover和mouseenter都是鼠标移到元素身上就触发，区别是：
1.mouseover经过自身盒子触发，经过子盒子也触发，用于冒泡特性
2.mouseenter只经过自身盒子触发，没有冒泡特性
一、mouseover和mouseenter的不同点
二者的本质区别在于,mouseenter不会冒泡，简单地说，它不会被它本身的子元素的状态影响到。但是，mouseover就会被它的子元素影响到，在触发子元素的同时，mouseover会冒泡触发它的父元素。（想要阻止mouseover的冒泡事件就用mouseenter）
当二者都没有子元素时，二者的行为是一致的，但是二者内部都包含子元素时，行为就不同了。
1.事件的触发时机
mouseover:当鼠标移入元素或子元素都会触发事件。
mouseenter:当鼠标移入元素才会触发事件。
2.是否支持冒泡
mouseover:支持冒泡
mouseenter:不支持冒泡
二、案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mouseover与mouseenter的区别</title>
<script src="jquery.min.js"></script>
<script type="text/javascript">
var x=0;
var y=0;
$(document).ready(function(){
$("div.mouseover").mouseover(function(){
$(".mouseover span").text(x+=1);
});
$("div.mouseenter").mouseenter(function(){
$(".mouseenter span").text(y+=1);
});
});
</script>
</head>
<body>
<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。(mouseout)</p>
<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。(mouseleave)</p>
<div class="mouseover" style="background-color:green;padding:20px;width:40%;float: left;">
<h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>
</div>
<div class="mouseenter" style="background-color:green;padding:20px;width:40%;float: right;">
<h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>
</div>
</body>
</html>
总结
显然，mouseover事件因为具有冒泡性质，在子元素内移动的时候会经常被触发，如果我们不希望这样的话，就需要使用严谨一点的mouseenter方法了。当没有子元素时，这两个方法都可以使用。
1160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
