jQuery同时使用mouseover和mouseout造成闪烁

【前言】

      下拉菜单效果,jQuery同时使用mouseover和mouseout造成闪烁,这里简单总结下解决方案

      参考文章解决slideDown()和slideUp()反复执行的问题

     

【主体】

      这里涉及到一个事件冒泡,由内到外执行,二级菜单的下拉过程中,如果划出二级菜单时会发生事件冒泡,从而导致下拉菜单在下拉和上滑间来回切换。

      这个在jQuery文档里已经给过提示说明:

      (1)mouseover与mouseenter区别

①mouseover事件是在鼠标进入指定元素时或者任意子元素的时候触发 
②mouseenter事件只有在鼠标进入被选元素时触发

两者的显著区别在于mouseover会导致子元素向上触发事件,产生类似冒泡事件的效果。而mouseenter只有在被选元素上产生效果,与子元素无关jQuery同时使用mouseover和mouseout造成闪烁

      (2)mouseout与mouseenter区别

①mouseout当鼠标离开被选元素或者任意子级元素的时候触发
②mouseleave事件只有在鼠标离开被选元素时触发

两者区别与上面类似。

jQuery同时使用mouseover和mouseout造成闪烁
 

       (3)所以,以后做二级下拉菜单尽量避免用mouseover()和mouseout()的组合,建议用hover(inFuntion,outFunction)方法------→该方法相当于mouseenter与mouseleavel()的结合。

                

【小结】

     (1)hover != mouseover+mouseout,但hover = mouseenter+mouseleave

     (2)

.