jQuery中mouseleave和mouseout的区别

2010-03-07    分类:前端技术    11人评论9,534 views


Warning: Illegal string offset 'debug' in /home/steveluo/public_html/wp-content/plugins/allow-javascript-in-posts-and-pages/allowJS.php on line 17

很多人在使用jQuery实现鼠标悬停效果时,一般都会用到mouseover和mouseout这对事件。而在实现过程中,可能会出现一些不理想的状况。

先看下使用mouseout的效果:

使用了mouseout事件↓

我们发现使用mouseout事件时,鼠标只要在下拉容器#list里一移动,就触发了hide(),其实是因为mouseout事件是会冒泡的,也就是事件可能被同时绑定到了该容器的子元素上,所以鼠标移出每个子元素时也都会触发我们的hide()。

从jQuery 1.3开始新增了2个mouse事件,mouseenter和mouseleave。与mouseout事件不同,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
我们来看一下mouseleave事件的效果:

使用了mouseleave事件↓

mouseleave和mouseout事件各有用途,因为事件冒泡在某些时候是非常有用的。但是当我们不需要冒泡的时候,确实也挺烦人的。

本文参考了jquery中解决div mouseout事件冒泡的问题

转载请注明:摩登坊 » jQuery中mouseleave和mouseout的区别

继续查看有关 的文章

6访客评论 ,博主回复4

  1. 第一次听说mouseleave方法,学习了。问一下能做个友情链接么?
    鹭鹭设计室(http://blog.luluui.info)
    小站刚成立不久,网站内容一部分摘译外文,另一部分原创。
    现在还没有PR,有一点不好意思,谢谢了。
    贵站链接已经加上了,谢谢了。

    鹭鹭设计室03-10 15:59
  2. 已经添加~感谢支持。

    Steve Luo03-13 16:00
  3. 不错,请教了几个常年搞开发的朋友都不知道这个问题,俺翻了同类代码好几遍才发现这个细节。

    博客很好看,有兴趣加友情吗?

    jean04-11 13:53
  4. 谢谢,贵站链接已经添加~

    Steve Luo04-26 20:05
  5. 子级触发haslayout可以避免这个问题

    nic11-15 10:16
  6. $(“#container”).mouseleave
    这个事件很多浏览器都不可以用吧

    你服务器的IE是几呀

    loveboy12-22 17:24
  7. 这个不是IE版本的关系,是jQuery版本的关系,1.4以上版本均支持这个事件的。

    Steve Luo04-04 12:58
  8. 好像是的,谢谢提醒!

    Steve Luo04-04 13:01
  9. 嗯嗯,谢谢楼主分享。jQuery既简单又耗油。顶!

    35186926704-20 13:47

我来说说

*

*

取消