jQuery中的mouseenter和mouseleave事件

今天做一个下拉菜单的时候碰到了一个bug,用mouseout的时候,鼠标还没移出拉菜单就自动关闭了,
看案例:https://www.html.cn/demo/mouseleave/2.html

经过几番查阅发现了jQuery中还有mouseenter和mouseleave事件,这两个事件在手册中找不到,所以特地查阅了一番。

大家知道事件的冒泡特性,在上面的BUG中也正是因为这个冒泡特性,对于mouseover事件来说 ,当鼠标从其他元素 移动到 child节点时发生,但此事件会冒泡 所以会导致 parent 也出发mouseover。如果我们对 parent注册了 mouseover监听,从 parent移动到child 同样出发parent的mouseover 有时候我们不希望这样的事情发生。

对于 mouseover 和mouseenter 两个事件 最大的区别就是 mouseenter 是 不冒泡的事件,这时候 如果注册的监听 是mouseenter的话 无论鼠标从任何元素 移动到child时 只有child元素 发生mouseenter事件 而其祖宗节点 都不会因为冒泡 而触发此事件。

对于 mouseout 和mouseleave 也是如此 当鼠标从child 移出时 mouseout同样会冒泡到 parent 从而触发parent的 mouseout 二mouseleave 同样无此问题。

看demo:https://www.html.cn/demo/mouseleave/1.html

赞(0) 打赏
未经允许不得转载:WEB前端开发 » jQuery中的mouseenter和mouseleave事件

评论 13

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    https://www.html.cn/demo/mouseleave/1.html

    有BUG!鼠标快速移动几次看看。问题没得到解决。
    jQuery 1.4.2里hover事件就是mouseenter和mouseleave!中文的CHM文档不全。我在很多地方都说过了。

    edielei9年前 (2010-05-15)回复
  2. #-48

    这样的菜单我一般采用setTimeout的方法处理,今天看了你的文章又提供了一中新的方式~呵呵~你在搜道工作吗?

    断桥残雪9年前 (2010-05-15)回复
  3. #-47

    不对,那个sel-down-w mouseout不能关闭啊~我跟你写的不一样,呵呵~我是mouseout关闭的,移动到ul就不关闭,移出关闭

    断桥残雪9年前 (2010-05-15)回复
  4. #-46

    那demo 鼠标移出“设置”,而不经过下面的子菜单,子菜单就不能收回。一般用setTimeout 处理。(所说的和你文章内容无关,囧~~)

    佐吾9年前 (2010-05-15)回复
  5. #-45

    疯狂的jquery迷恋者

    zhenn9年前 (2010-05-15)回复
  6. #-44

    任何可能多次触发动画的地方都需要先.stop()再.animate()

    joewufl9年前 (2010-05-17)回复
  7. #-43

    问题还是一直存在的 如果你把鼠标移向下面的子菜单的话 是不会自动关闭的

    直觉8年前 (2010-09-27)回复
  8. #-42

    解决mouseover和mouseout冒泡问题,使用hover可以解决。

    wyysf8年前 (2010-10-15)回复
  9. #-41

    下拉菜单根本不用那么麻烦,我基本上都是使用下面的办法,每个li菜单里有两个元素,一个a标签用来显示文字,一个包含子菜单,div的定位为absolute,这样可以偏移菜单一个相对位置弹出来,因为子菜单是li的子元素,所以在上面移动同样触发父菜单的mouseover事件,而鼠标移出子菜单,也同样触发父的mouseout事件,这样实现既简单,又没有bug,而且不需要jquery支持。

    菜单

    子菜单一
    子菜单二

    function show(id){
    document.getElementById(id).style.display=’block’;
    }
    function hide(id){
    document.getElementById(id).style.display=’none’;
    }

    jesse8年前 (2010-11-26)回复
  10. #-40

    太棒了。。。很好

    ayanmw8年前 (2011-05-24)回复
  11. #-39

    mouseover 和mouseenter的区别不是事件冒泡产生的,从父窗口进入子窗口是产生了mouseover事件,但是即使这个,mouseover事件传给了交窗口,子菜单也不会消失,因为父窗口的mouseover()应该是显示子菜单的。

    小赵7年前 (2011-11-24)回复
  12. #-38

    mouseleave为什么会被多次执行,楼主的代码也有这样的现象?

    Rfiy2年前 (2016-11-28)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏