mouseout和mouseleave的区别？
来源：2-5 jQuery鼠标事件之mouseenter与mouseleave事件
宝慕林2233867
2016-07-26 14:54
我看两个事件都是鼠标移出执行什么什么操作啊，有什么不同啊？什么时候用哪个啊？
写回答
关注
2回答
-
- 靖_pacify
- 2016-07-26 15:32:34
mouseout是冒泡的,mouseleave是不冒泡的
在一个多层容器结构中，如果只有你需要的那一层容器有绑移除事件，两个没有区别 ；如果多层绑有移除事件，前者有冒泡，结果是移出内层（可能还没有移出外层）触发内层的移除事件后，会冒泡到外层触发外层的移除的事件。后者的话只会触发内层的移出事件不会冒泡到外层。
-
- 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 事件。
jQuery基础(三)—事件篇
jQuery第三阶段开启事件修炼，掌握对页面进行交互的操作
89997 学习 · 625 问题
相似问题