如何解除 jQuery 中的“ hover”绑定？

如何解除 jQuery 中的“ hover”绑定？

这种做法行不通:

$(this).unbind('hover');
158962 次浏览
小开

Hover 在幕后所做的一切就是绑定到 mouseover 和 mouseout 属性。我会单独绑定和解除这些事件的函数。

例如，假设您有以下 html:

<a href="#" class="myLink">Link</a>

那么你的 jQuery 应该是:

$(document).ready(function() {


function mouseOver()
{
$(this).css('color', 'red');
}
function mouseOut()
{
$(this).css('color', 'blue');
}


// either of these might work
$('.myLink').hover(mouseOver, mouseOut);
$('.myLink').mouseover(mouseOver).mouseout(mouseOut);
// otherwise use this
$('.myLink').bind('mouseover', mouseOver).bind('mouseout', mouseOut);




// then to unbind
$('.myLink').click(function(e) {
e.preventDefault();
$('.myLink').unbind('mouseover', mouseOver).unbind('mouseout', mouseOut);
});


});
小开
最佳答案

$(this).unbind('mouseenter').unbind('mouseleave')

或更简洁(感谢 @ Chad Grant) :

$(this).unbind('mouseenter mouseleave')

小开

分别解除 mouseenter和 mouseleave事件的绑定，或者解除元素上的所有事件的绑定。

$(this).unbind('mouseenter').unbind('mouseleave');

或者

$(this).unbind();  // assuming you have no other handlers you want to keep
小开

Actually, the JQuery 文档 has a more simple approach than the chained examples shown above (although they'll work just fine):

$("#myElement").unbind('mouseenter mouseleave');

从 jQuery 1.7开始，您还可以使用 $.on()和 $.off()进行事件绑定，因此要解除鼠标悬停事件的绑定，您可以使用更简单、更整洁的:

$('#myElement').off('hover');

伪事件名称“ hover”用作速记表示“ mouseenter mouseleave”，但在早期的 jQuery 版本中处理方式不同; 需要明确删除每个文字事件名称。使用 $.off()现在允许您使用相同的速记删除两个鼠标事件。

Edit 2016:

这仍然是一个很受欢迎的问题，所以值得注意 @ Dennis 98在下面的评论中的观点，在 jQuery 1.9 + 中，“ hover”事件是 不赞成而不是标准的“ mouseenter mouseleave”调用。因此，您的事件绑定声明现在应该如下所示:

$('#myElement').off('mouseenter mouseleave');

小开

Unbind ()不能处理硬编码的内联事件。

因此，例如，如果您想解除绑定 mouseover 事件 我发现，$('#some_div').attr('onmouseover','')是一个快速和肮脏的方式来实现它。

小开

我发现这可以作为. hover ()的第二个参数(函数)

$('#yourId').hover(
function(){
// Your code goes here
},
function(){
$(this).unbind()
}
});

第一个函数(到。Hover ()是 mouseover 并将执行您的代码。第二个参数是 mouseout，它将解除对 # yourId 的 hover 事件的绑定。 Your code will be executed only once.

小开

另一种解决方案是 。死()，用于与 。生活()相关联的事件。

例如:

// attach click event for <a> tags
$('a').live('click', function(){});


// deattach click event from <a> tags
$('a').die('click');

你可以在这里找到一个很好的参考: Exploring jQuery .live() and .die()

(对不起，我的英语不好)

小开

可以使用 off删除由 on附加的特定事件处理程序

$("#ID").on ("eventName", additionalCss, handlerFunction);


// to remove the specific handler
$("#ID").off ("eventName", additionalCss, handlerFunction);

使用这个，您将只删除 函数
Another good practice, is to set a nameSpace for multiple attached events

$("#ID").on ("eventName1.nameSpace", additionalCss, handlerFunction1);
$("#ID").on ("eventName2.nameSpace", additionalCss, handlerFunction2);
// ...
$("#ID").on ("eventNameN.nameSpace", additionalCss, handlerFunctionN);


// and to remove handlerFunction from 1 to N, just use this
$("#ID").off(".nameSpace");

提交答案