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）

.

• 
• 大小: 25 KB

• 查看图片附件