jquery的mouseover和mouseout多次触发解决办法

jquery的mouseover和mouseout多次触发解决办法

jquery的mouseover和mouseout多次触发解决办法

事件的区别:

mouseover与mouseenter

不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。

只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。

mouseout与mouseleave

不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。

只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。

在#a没有子元素的情况下,两者在效果上没有区别

但是#a有子元素的情况下,为了mouseover,mouseout触发的此时就可能比mouseenter,mouseleave多

$("#a").mouseover(function(){ $(this).children().slideDown(1000); }).mouseout(function(){ $(this).children().slideUpt(1000); });

$("#a").mouseenter(function(){ $(this).children().slideDown(1000); }).mouseleave(function(){ $(this).children().slideUp(1000); });

而slideUp是个过程需要时间,但是mouseout,mouseover,mouseenter,mouseleave事件都是瞬间发生,多次触发会产生动画重复,这个可以用jq的stop方法阻止动画。

$("#a").mouseenter(function(){ $(this).children().stop().slideDown(1000); }).mouseleave(function(){ $(this).children().stop().slideUp(1000); });

jquery stop:

//语法结构

$("#div").stop();//停止当前动画,继续下一个动画 
$("#div").stop(true);//清除元素的所有动画 
$("#div").stop(false, true);//让当前动画直接到达末状态 ,继续下一个动画
$("#div").stop(true, true);//清除元素的所有动画,让当前动画直接到达末状态

0
蜗牛不带伞
蜗牛不带伞
发表于2018-08-02 8:08
标签 JQuerymouseoutmouseover多次触发 归档于 JS