鼠标快速移动时不会触发jQuery mouseleave函数

Posted 2023-05-08

【中文标题】鼠标快速移动时不会触发jQuery mouseleave函数

【英文标题】：jQuery mouseleave function isn't being triggered when mouse moves quickly

【发布时间】：2011-09-02 21:56:28

【问题描述】：

我有一个时间轴，上面有一些小针，当悬停在上面时，可以向上或向下滑动，然后显示标题。当鼠标离开时，标题应该消失并且图钉会向后移动。这可行，但是使用我正在使用的代码，如果鼠标移动得太快，它不会检测到鼠标离开。我该如何解决这个问题？

P.S，我使用鼠标进入/离开的唯一原因是因为我认为我需要使用 live()，因为我的元素是在文档加载后动态添加的。

    $('#about-me .progress-bar .progress .notes li.personal').live('mouseenter',function()
    $(this).animate(
        top:25
    , 200, function()
        $(this).find('.caption').stop(true, true).fadeIn(200);
    );     
).live('mouseleave',function()
    $(this).find('.caption').stop(true, true).delay(200).fadeOut(200,function()
        $(this).parents('li').animate(
            top:30
        ,200);         
    );
);

【问题讨论】：

当你说它没有检测到 mouseleave - 如果你用 alert('test') 替换 mouseleave 函数，这根本不会触发吗？

哦，确实如此 :( 标题只是没有淡出，图钉也没有动画 >.

知道为什么会发生这种情况吗？

【参考方案1】：

编辑

好的新计划！

试试这个：

$('#about-me .progress-bar .progress .notes li.personal').live('mouseenter',function()
    $(this).animate(
        top:25
    , 200, function()
        $(this).find('.caption').stop(true, true).fadeIn(200);
    );     
).live('mouseleave',function()
    $(this).stop(true, true).find('.caption').stop(true, true).delay(200).fadeOut(200,function()
        $(this).parents('li').animate(
            top:30
        ,200);         
    );
);

我没有点击您在两个单独的对象上运行动画！对这个更有信心！

【讨论】：

不幸的是，他们仍然卡在上面。如果我慢慢移动鼠标，它们就不会。

尝试将 .stop(true, true).fadeIn 更改为 .stop().fadeIn - 这似乎已经纠正了我测试中的行为 - 虽然可能有敲门声

你这个天才！救了我一个正确的头痛。我能问一下你是怎么解决这个问题的吗？我知道你在 find() 之前添加了 stop()，但是为什么呢？再次感谢，不胜感激。

哇！很高兴它奏效了！所以发生的事情是当鼠标离开元素时动画持续时间仍然处于活动状态，可以说最多剩余 190 毫秒。因此，此回调将在fadeOut 之前运行，并调用.stop(true, true) 删除任何排队的函数（在本例中为fadeOut 及其回调）。因此，通过将stop() 添加到$(this) 元素，我们可以防止触发初始回调！至少在我看来是这样的：D

【参考方案2】：

我以前见过这个。当您将鼠标移动得足够快时，它只会跳到一个新位置并且不会触发 mouseleave 动作。这是我使用一点 jQuery 的解决方案。基本上，当您将鼠标悬停在图钉上时，您需要将侦听器绑定到窗口，以查找任何鼠标移动并检查您是否仍在图钉上悬停。我不认为你会希望这个监听器一直运行，所以我让它自己解绑。

$(".pin").live("mouseenter", function(event) 
  var pin = $(event.target);
  // 显示标题
  pin.addClass("悬停");

  $(window).bind("mousemove", function(event) 
    var 目标 = $(event.target);
    if (!target.hasClass("hovered")) 
      //隐藏标题
      $(".hovered").removeClass("hovered");
      $(window).unbind("mousemove");
    
  

【讨论】：

感谢 muirbot 的回答，这实际上对我有所帮助，但 Inrbob 的回答解决了这个问题。