Mar
07
今天在写一个鼠标悬停下拉菜单过程中，遇到一个很抓狂的问题。既然是鼠标悬停效果，那就用到了jQuery的2个事件，mouseover和mouseout（在jQuery 1.3的API手册中只有这两个鼠标移入移出事件）。
先看下使用mouseout的效果：
Tips:您可以在运行代码前对其进行修改！
我们发现使用mouseout时，鼠标只要在容器里一移动，就被出发了hide()，其实是因为mouseout事件也会影响到子元素，也就是事件可能被同时绑定到了该容器的子元素上，所以鼠标移出每个子元素也都会触发我们的hide()。
经过网上一番调研~从jQuery 1.3开始新增了2个mouse事件，mouseenter和mouseleave。现在我们使用mouseleave事件，这个事件在jQuery手册上好像并没有提到…囧
我们来看一下mouseleave事件是否能够解决这个问题。
Tips:您可以在运行代码前对其进行修改！
好了，我们的问题解决了，需要的朋友各取所需吧。
本文参考了jquery中解决div mouseout事件冒泡的问题
欢迎转载，务必请记得保留出处，否则就如看帖不回帖一样，是不道德的！
本文地址：http://www.steveluo.name/jquery-mouseleave-instead-of-mouseout/
本文地址：http://www.steveluo.name/jquery-mouseleave-instead-of-mouseout/
您可能还对这些文章感兴趣：
9 Comments
Make A CommentComments RSS Feed TrackBack URL
March 10th, 2010 at 3:59 pm
第一次听说mouseleave方法，学习了。问一下能做个友情链接么？
鹭鹭设计室（http://blog.luluui.info）
小站刚成立不久，网站内容一部分摘译外文，另一部分原创。
现在还没有PR,有一点不好意思，谢谢了。
贵站链接已经加上了，谢谢了。
[Reply]
Steve Luo Reply:
March 13th, 2010 at 4:00 pm
已经添加~感谢支持。
[Reply]
April 11th, 2010 at 1:53 pm
不错，请教了几个常年搞开发的朋友都不知道这个问题，俺翻了同类代码好几遍才发现这个细节。
博客很好看，有兴趣加友情吗？
[Reply]
Steve Luo Reply:
April 26th, 2010 at 8:05 pm
谢谢，贵站链接已经添加~
[Reply]
November 15th, 2010 at 10:16 am
子级触发haslayout可以避免这个问题
[Reply]
Steve Luo Reply:
April 4th, 2011 at 1:01 pm
好像是的，谢谢提醒！
[Reply]
December 22nd, 2010 at 5:24 pm
$(“#container”).mouseleave
这个事件很多浏览器都不可以用吧
你服务器的IE是几呀
[Reply]
Steve Luo Reply:
April 4th, 2011 at 12:58 pm
这个不是IE版本的关系，是jQuery版本的关系，1.4以上版本均支持这个事件的。
[Reply]
March 15th, 2011 at 2:27 pm
see also: http://www.mkyong.com/jquery/different-between-mouseout-and-mouseleave-in-jquery/comment-page-1/#comment-47618
[Reply]