mouseout和mouseleave的区别？

个回答

靖_pacify

2016-07-26 15:32:34

已采纳

mouseout是冒泡的,mouseleave是不冒泡的
在一个多层容器结构中，如果只有你需要的那一层容器有绑移除事件，两个没有区别；如果多层绑有移除事件，前者有冒泡，结果是移出内层（可能还没有移出外层）触发内层的移除事件后，会冒泡到外层触发外层的移除的事件。后者的话只会触发内层的移出事件不会冒泡到外层。

0

Dling: 2016-07-26 15:30:24

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery基础修炼圣典—事件篇</title>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<style>
li{
padding: 10px;
margin-bottom: 4px;
background: rgba(0,0,255,.3);
}
li span{display:none;background: yellow}
</style>
</head>
<body>

<ul>
<li>只有开被选<span>span</span></li>
<li>在鼠标指针离<span>span</span></li>
<li>元素时，才<span>span</span></li>
<li>会触发 mous<span>span</span></li>
<li>eleave 事件。<span>span</span></li>
</ul>
<script>

$(function(){
$("li").each(function(i) {
   //删除的鼠标划过的显示与隐藏
   $(this).mouseover(function() {
       $(this).find(".del").fadeIn(100);
   })
   $(this).mouseout(function() {
       $(this).find(".del").fadeOut(100);
   })
})
})
</script>
</body>
</html>

以上一个例子,你可以修改mouseout为mouseleave看看

当为mouseout的时候，你会发现在li内部鼠标移到.del的时候.del会闪动，那是因为你可能离开了该DIV的子元素，所以会出发mouseout事件。而mouseleave没有这个问题。

具体mouseleave和mouseout两者之间的区别主要有以下两点：

1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。