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

前端之家收集整理的这篇文章主要介绍了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)

猜你在找的jQuery相关文章