当我快速鼠标时,jQuery悬停卡住了

Posted

技术标签:

【中文标题】当我快速鼠标时,jQuery悬停卡住了【英文标题】:jQuery hover gets stuck when I mouse quickly 【发布时间】:2012-04-18 13:09:05 【问题描述】:

我有一个显示“订阅”的按钮,当用户将鼠标悬停在它上面时,我想用另一个显示“取消订阅”的按钮替换它。

(有点像 Twitter 的关注按钮,如果你悬停,它会变成取消关注。)

这是我到目前为止所得到的。

$(document).ready(function()
    $('#subscribed_button').hover(function()
        $('#subscribed_button').css("display","none");
        $('#unsubscribe_button').css("display","inline");
    ,function()
    );
    $('#unsubscribe_button').hover(function()
    ,function()
        $('#unsubscribe_button').css("display","none");
        $('#subscribed_button').css("display","inline");
    );
);

一切都很好,除了当我快速鼠标时,在这种情况下似乎检测到“悬停”,但没有检测到“悬停”。所以我的按钮偶尔会卡在“取消订阅”中……这很奇怪,而且在视觉上会分散注意力。

我在 *** 上看到的大多数解决方案都与停止动画有关,但在这种情况下,我没有制作任何动画;这是一个简单的显示开/关。

有什么想法吗?

【问题讨论】:

你能提交一个活生生的例子吗? 在 CSS 中实际上有一个叫做 :hover 的东西,代码中有很多函数吗? @Jorge,当代码不起作用时,我很犹豫是否将代码推送到 WWW。 @adeneo 我通常会使用 :hover 进行样式设置,但在这种情况下,我实际上是在更改按钮的文本,而且我想不出在没有纯 CSS 的情况下做到这一点的方法在某处涉及 javascript 【参考方案1】:

没有看到它的实际效果,我假设这是因为您显示/隐藏了 2 个不同的 html 元素。当您快速将鼠标悬停时,可能是非活动元素尚未激活,等等等等,从而导致问题。

为了获得更好的稳定性和性能,我建议如下:

您的订阅/取消订阅仅使用一个 html 元素,而不是显示/隐藏 2 个元素,只需更改按钮的文本和/或通过更改 css 类等替换背景图像。甚至更好如果使用图像背景将使用包含两种状态的单个背景图像,并根据当前状态更新背景位置。

以上只是一个概念,因为您尚未发布整个代码,因此无法针对上述进行修改。

【讨论】:

谢谢,成功了! @binarious 给了我一个很好的 sn-p。谢谢你们。【参考方案2】:

我只会使用一个元素:

$(function() 
    var $sub = $('#subscribe_button');

    $sub.hover(function() 
        $sub.text('Unsubscribe');
    , function() 
        $sub.text('Subscribe');
    );

);

【讨论】:

谢谢! @KP。给了我理论,你给了我实践。效果很好。【参考方案3】:

在 jQuery 中有称为 mouseenter 和 mouseleave 的方法。 http://api.jquery.com/mouseenter/ 如果您使用它们,它将有助于正确冒泡并解决您的问题。

【讨论】:

以为可以做到,但遗憾的是没有骰子。 你能发一个mouseenter and leave in use的例子吗?

以上是关于当我快速鼠标时,jQuery悬停卡住了的主要内容,如果未能解决你的问题,请参考以下文章

Bootstrap 4工具提示使用Datatables.net卡住了

使用 Datatables.net 卡住的 Bootstrap 4 工具提示

悬停链接并在 SVG 中更改颜色 [重复]

挤压弹出菜单导致测试卡住

jQuery悬停依赖于两个元素

jquery拖放挂起或卡住Android浏览器