mouseover/mouseout和mouseenter/mouseleave的区别
前不久自己写的一个demo中使用的mouseover/mouseout但是遇到一些问题,后来对比了下网上的和自己写的demo,找出了mouseover/mouseout和mouseenter/mouseleave两者的区别,不准确之处请大家指出。
<!DOCTYPE html>
<html lang="en">
<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>
通过运行此例子中可以看出:
1.在一个嵌套的div中,鼠标移入到id为outside的div中会触发mouseover和mouseenter事件;
2.鼠标移入到id为inner的div中时,只会触发mouseover事件而不会触发mouseenter事件;
3.如果是从outside移入到inner中,会触发一次mouseout事件。
总结得出:若是单个元素,鼠标指针移入移出,mouseover/mouseout和mouseenter/mouseleave事件的触发效果一致;若是嵌套元素,mouseover/mouseout会往子级传递,并且鼠标指针从父级进入子级或者从子级进入父级时,都会触发离开的mouseout事件和进入的mouseover事件,而mouseenter/mouseleave只会在绑定的元素上生效。