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只会在绑定的元素上生效。
2358
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
