今天做一个下拉菜单的时候碰到了一个bug,用mouseout的时候,鼠标还没移出拉菜单就自动关闭了,
看案例:https://www.7psus5.com/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 同样无此问题。
https://www.7psus5.com/demo/mouseleave/1.html
有BUG!鼠标快速移动几次看看。问题没得到解决。
jQuery 1.4.2里hover事件就是mouseenter和mouseleave!中文的CHM文档不全。我在很多地方都说过了。
这样的菜单我一般采用setTimeout的方法处理,今天看了你的文章又提供了一中新的方式~呵呵~你在搜道工作吗?
不对,那个sel-down-w mouseout不能关闭啊~我跟你写的不一样,呵呵~我是mouseout关闭的,移动到ul就不关闭,移出关闭
那demo 鼠标移出“设置”,而不经过下面的子菜单,子菜单就不能收回。一般用setTimeout 处理。(所说的和你文章内容无关,囧~~)
疯狂的jquery迷恋者
任何可能多次触发动画的地方都需要先.stop()再.animate()
问题还是一直存在的 如果你把鼠标移向下面的子菜单的话 是不会自动关闭的
解决mouseover和mouseout冒泡问题,使用hover可以解决。
下拉菜单根本不用那么麻烦,我基本上都是使用下面的办法,每个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’;
}
太棒了。。。很好
mouseover 和mouseenter的区别不是事件冒泡产生的,从父窗口进入子窗口是产生了mouseover事件,但是即使这个,mouseover事件传给了交窗口,子菜单也不会消失,因为父窗口的mouseover()应该是显示子菜单的。
mouseleave为什么会被多次执行,楼主的代码也有这样的现象?