共同点:都是鼠标进入进出时会触发的回调函数。
不同点:进入子元素是否会触发:
demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#outside {
width: 300px;
height: 300px;
border: 1px solid #666
}
#outside #inner {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#inner').mouseover(() => {
console.log( 'mouseover被触发' );
}).mouseout(() => {
console.log( 'mouseout被触发' );
});
$('#inner').mouseenter(() => {
console.log( 'mouseenter被触发' );
}).mouseleave(() => {
console.log( 'mouseleave被触发' );
});
});
</script>
</head>
<body>
<div id="outside">
<div id="inner"></div>
</div>
</body>
</html>
通过运行此例子中可以看出:
- 在一个嵌套的div中,鼠标移入到id为outside的div中会触发mouseover和mouseenter事件;
- 鼠标移入到id为inner的div中时,只会触发mouseout事件而不会触发mouseleave事件;
- 如果是从inner移入到outside中,会再次触发一次mouseover事件。
- 只有当鼠标从outside离开时,才会触发mouseleave事件。