删除单击的悬停事件，然后再次绑定

Posted 2023-05-08

【中文标题】删除单击的悬停事件，然后再次绑定

【英文标题】：Removing hover event for click, then binding it again

【发布时间】：2012-03-18 21:12:42

【问题描述】：

我有一个名为#footer 的 div，它的边距使用 jQuery 进行动画处理，以便在用户将鼠标悬停在其上时向上滑动。在#footer 内部是一个名为#toggle 的div，它会在单击时重新设置页脚动画。

一切正常，除了当点击#toggle 并且#footer 向下动画时，如果我移动鼠标，它会再次触发悬停，即使鼠标不在#footer 上方。快把我逼疯了！

这是 jQuery：

$('#footer').hover(function()
    $(this).stop(true, true).animate("margin-bottom": "0px", "slow");
    $('#toggle').addClass('expanded'); 
);

$('#toggle').click(function() 
    $('#footer').stop(true, true).animate("margin-bottom": "-120px", "slow");
    $(this).removeClass('expanded');
);

我认为我需要的是在完成时取消绑定悬停事件，并在单击#toggle 时重新绑定它。可能是？但我不知道如何使它工作。

【问题讨论】：

使用mouseenter 事件而不是hover。 api.jquery.com/mouseenter

接受，因为你先把它修好了，大约一分钟！再次感谢。

【参考方案1】：

您可能应该使用mouseenter 事件而不是hover。

将hover 与单个参数一起使用将触发mouseenter 和mouseleave 上的函数。

悬停(handlerInOut(eventObject))

【参考方案2】：

因为您只为hover() 事件提供了一个参数，所以mouseenter 和mouseleave 都会调用该参数。如果您将其更改为使用mouseenter()，它应该可以正常工作。

$('#footer').mouseenter(function()
    $(this).stop(true, true).animate("margin-bottom": "0px", "slow");
    $('#toggle').addClass('expanded'); 
);

【参考方案3】：

要解除绑定/重新绑定，请在别处声明匿名函数（并为其命名），然后将其作为参数传入：

function footerHover() 
    $(this).stop(true, true).animate("margin-bottom": "0px", "slow");
    $('#toggle').addClass('expanded');
    $(this).unbind('hover');

$('#footer').hover(footerHover);

$('#toggle').click(function()
    $('#footer').hover(footerHover);
    $('#footer').stop(true, true).animate("margin-bottom": "-120px", "slow");
    $(this).removeClass('expanded');
);

您还可以尝试使用两个函数绑定悬停（因为这就是悬停的使用方式）：

$(selector).hover(functionWhileHovering, functionWhenNotHovering);

更具体地说：

$('#footer').hover(function () 
    $(this).stop(true, true).animate("margin-bottom": "0px", "slow");
    $('#toggle').addClass('expanded');
    $(this).unbind('hover');
, function () 
    $('#footer').stop(true, true).animate("margin-bottom": "-120px", "slow");
    $(this).removeClass('expanded');
);