jQuery的mouseover和mouseout事件当快速移动,事件延迟触发问题

字号+ 编辑: 秦朝 修订: 秦朝 来源: CSDN AlloyTeam-Zy 2017-05-14 11:31:23 我要说两句(0)

本文阐述了在处理mouseover和mouseout事件时遇到问题的分析思路,值得借鉴。

首先来看一段代码:

$(document).ready(function() {
    $("div.div1").mouseover(function() {
        $("div.div2").animate({bottom:'10px'},1000);
    })

    $("div.div1").mouseout(function() {
        $("div.div2").animate({bottom:'-50px'},1000);
    })
});

上述的代码很简单,我之所以没有用 hover() 来写,是因为我想让代码思路更清晰,更容易理解!它所实现的效果就是将鼠标放在class为“div1”的div上,class为“div2”的div的bottom值为“10px”,将鼠标移开,其值将变为“-50”px,就是一个class为div2上下移动的效果,可是当我快速将鼠标放在class为div1的div上,然后快速移开,以此反复几次,然后你会发现那个class为div2的div在那不停的一上一下,此时,我的鼠标已经没动了,这个效果很差,事件延迟触发,然后我就在想,怎么解决,刚开始,想到使用omouseenter代替了你原来的mouseover,使得第一次触发事件后,在对象区域反复移动将不再继续触发,然后觉得也可以使用:not(:animated)来判断当前对象是否正在执行动,还想到了preventDefault();结果都有一一去验证,去实现,有的出结果了,但效果还是不理想,有的还没出结果。。。。。

最后,我想到了jQuery的 stop(), 它的作用是停止当前正在运行的动画,只要将目前正在运行的动画停下来,然后在实现往上往下移动就好,然后写下了如下代码:

$('div.div1').hover(
    function() {
        $("div.div2").stop().animate({bottom:'10px'},1000);})
    },
    function() {
        $("div.div2").stop().animate({bottom:'-50px'},1000);}
    }
);

结果解决了jQuery的mouseover和mouseout事件当快速移动 事件延迟触发问题,而且动画效果很友好。

mouseover和mouseout在低版本的浏览器会出现闪动的现象

鼠标滑过的时候出现一个层,当鼠标滑到当前层mouseover和mouseout在低版本的浏览器出现闪动现象——解决这个现象的办法不止一种,最简单的把mouseover和mouseout换成对应的mouseenter和mouseleave。

当鼠标指针位于元素上方时,会发生 mouseover 事件。

该事件大多数时候会与 mouseout 事件一起使用。

注释:与 mouseenter 事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。

注释:与 mouseleave 事件不同,不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。请看下面例子的演示。

当鼠标指针穿过元素时,会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。

注意:mouseover ,mouseout当鼠标指针穿过被选元素子元素时,也会触发事件。这在绑定事件时,有时出现意想不到的Bug可能就是由 mouseover mouseout 事件引起的

mouseover与mouseenter

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

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

mouseout与mouseleave

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

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

阅完此文,您的感想如何?
  • 鼓掌

    0

  • 鄙视

    0

  • 开心

    0

  • 愤怒

    0

  • 可怜

    0

1.转来的文章都会标好来源,如对来源资料存疑,请邮件声明;
2.本站标注原创的文章,转发时烦请注明来源;
3.如文章侵犯了您的版权,请通知本站,该文章将在24小时内移除。

相关课文
  • JS的Timeout定时器怎么写成无限循环的?

    JS的Timeout定时器怎么写成无限循环的?

  • 并肩比较React Native和Ionic

    并肩比较React Native和Ionic

  • jQuery select下拉框的选中事件

    jQuery select下拉框的选中事件

  • CKPayer6.3如何替换logo

    CKPayer6.3如何替换logo

我要说说
网上宾友点评