二者最大的区别，就是mouseover是冒泡的，而mouseenter是不冒泡的。
看个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li style="background:blue;line-height:50px;" onmouseenter="myMouseEnter(1)" onmouseover="myMouseOver(3)">
菜单
<ul>
<li style="background:yellow;line-height:30px;" onmouseenter="myMouseEnter(22222)" onmouseover="myMouseOver(4)">子菜单</li>
</ul>
</li>
</ul>
</body>
</html>
<script>
function myMouseEnter(num){
console.log('mouse enter',num);
}
function myMouseOver(num){
console.log('mouse over',num);
}
</script>
如果只从父级进入子级的话，mouseenter只会触发一次，因此我们一般会使用mouseenter和mouseout
网友评论