jQuery同时使用mouseover和mouseout造成闪烁
【前言】
下拉菜单效果,jQuery同时使用mouseover和mouseout造成闪烁,这里简单总结下解决方案
参考文章解决slideDown()和slideUp()反复执行的问题
【主体】
这里涉及到一个事件冒泡,由内到外执行,二级菜单的下拉过程中,如果划出二级菜单时会发生事件冒泡,从而导致下拉菜单在下拉和上滑间来回切换。
这个在jQuery文档里已经给过提示说明:
(1)mouseover与mouseenter区别
①mouseover事件是在鼠标进入指定元素时或者任意子元素的时候触发 ②mouseenter事件只有在鼠标进入被选元素时触发
两者的显著区别在于mouseover会导致子元素向上触发事件,产生类似冒泡事件的效果。而mouseenter只有在被选元素上产生效果,与子元素无关。
(2)mouseout与mouseenter区别
①mouseout当鼠标离开被选元素或者任意子级元素的时候触发 ②mouseleave事件只有在鼠标离开被选元素时触发
两者区别与上面类似。
(3)所以,以后做二级下拉菜单尽量避免用mouseover()和mouseout()的组合,建议用hover(inFuntion,outFunction)方法------→该方法相当于mouseenter与mouseleavel()的结合。
【小结】
(1)hover != mouseover+mouseout,但hover = mouseenter+mouseleave
(2)
.