[英]How do I unbind “hover” in jQuery?
How do I unbind "hover" in jQuery? 如何在jQuery中取消绑定“悬停”?
This does not work: 这不起作用:
$(this).unbind('hover');
$(this).unbind('mouseenter').unbind('mouseleave')
或者更简洁(感谢@Chad Grant ):
$(this).unbind('mouseenter mouseleave')
Actually, the jQuery documentation has a more simple approach than the chained examples shown above (although they'll work just fine): 实际上, jQuery文档比上面显示的链接示例有更简单的方法(尽管它们可以正常工作):
$("#myElement").unbind('mouseenter mouseleave');
As of jQuery 1.7, you are also able use $.on()
and $.off()
for event binding, so to unbind the hover event, you would use the simpler and tidier: 在jQuery 1.7中,你还可以使用
$.on()
和$.off()
事件的结合,所以要取消绑定悬停事件,你可以使用简单,整洁的:
$('#myElement').off('hover');
The pseudo-event-name "hover" is used as a shorthand for "mouseenter mouseleave" but was handled differently in earlier jQuery versions; 伪事件名称“悬停” 用作 “mouseenter mouseleave” 的简写 ,但在早期的jQuery版本中处理不同; requiring you to expressly remove each of the literal event names.
要求您明确删除每个文字事件名称。 Using
$.off()
now allows you to drop both mouse events using the same shorthand. 使用
$.off()
现在允许您使用相同的速记删除两个鼠标事件。
Edit 2016: 编辑2016:
Still a popular question so it's worth drawing attention to @Dennis98 's point in the comments below that in jQuery 1.9+, the "hover" event was deprecated in favour of the standard "mouseenter mouseleave" calls. 仍然是一个受欢迎的问题,所以值得注意@ Dennis98在下面的评论中的观点,在jQuery 1.9+中,“悬停”事件被弃用 ,支持标准的“mouseenter mouseleave”调用。 So your event binding declaration should now look like this:
所以你的事件绑定声明现在应该是这样的:
$('#myElement').off('mouseenter mouseleave');
Unbind the mouseenter
and mouseleave
events individually or unbind all events on the element(s). 单独取消绑定
mouseenter
和mouseleave
事件,或取消绑定元素上的所有事件。
$(this).unbind('mouseenter').unbind('mouseleave');
or 要么
$(this).unbind(); // assuming you have no other handlers you want to keep
unbind() doesn't work with hardcoded inline events. unbind()不适用于硬编码的内联事件。
So, for example, if you want to unbind the mouseover event from <div id="some_div" onmouseover="do_something();">
, I found that $('#some_div').attr('onmouseover','')
is a quick and dirty way to achieve it. 因此,例如,如果你想从
<div id="some_div" onmouseover="do_something();">
取消绑定鼠标悬停事件,我发现$('#some_div').attr('onmouseover','')
是一种快速而肮脏的方式来实现它。
Another solution is .die() for events who that attached with .live() . 另一个解决方案是.die()用于附加.live()的事件。
Ex.: 例:
// attach click event for <a> tags
$('a').live('click', function(){});
// deattach click event from <a> tags
$('a').die('click');
You can find a good refference here: Exploring jQuery .live() and .die() 你可以在这里找到一个很好的参考: 探索jQuery .live()和.die()
( Sorry for my english :"> ) (抱歉我的英文:“>)
You can remove a specific event handler that was attached by on
, using off
您可以使用
off
删除on
附加的特定事件处理程序
$("#ID").on ("eventName", additionalCss, handlerFunction);
// to remove the specific handler
$("#ID").off ("eventName", additionalCss, handlerFunction);
Using this, you will remove only handlerFunction 使用它,您将只删除handlerFunction
Another good practice, is to set a nameSpace for multiple attached events 另一个好的做法是为多个附加事件设置nameSpace
$("#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");
All hover is doing behind the scenes is binding to the mouseover and mouseout property. 所有悬停在幕后都是绑定到mouseover和mouseout属性。 I would bind and unbind your functions from those events individually.
我会将这些事件单独绑定和取消绑定。
For example, say you have the following html: 例如,假设您有以下html:
<a href="#" class="myLink">Link</a>
then your jQuery would be: 然后你的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);
});
});
I found this works as second argument (function) to .hover() 我发现这可以作为.hover()的第二个参数(函数)
$('#yourId').hover(
function(){
// Your code goes here
},
function(){
$(this).unbind()
}
});
The first function (argument to .hover()) is mouseover and will execute your code. 第一个函数(.hover()的参数)是mouseover并将执行您的代码。 The second argument is mouseout which will unbind the hover event from #yourId.
第二个参数是mouseout,它将解除悬停事件与#yourId的绑定。 Your code will be executed only once.
您的代码只会执行一次。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.