Question

如何在jQuery中取消绑定“悬停”？

这不起作用：

$(this).unbind('hover');

Answer 1

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

或更简洁（感谢 @Chad Grant ）：

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

Answer 2

实际上，jQuery documentation的方法比上面显示的链式示例更简单（尽管它们可以正常工作）：

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

从jQuery 1.7开始，您还可以使用$.on()和$.off()进行事件绑定，因此要取消绑定悬停事件，您可以使用更简单更整洁的内容：

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

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

编辑2016：

仍然是一个受欢迎的问题所以值得关注@Dennis98在下面的评论中的观点，在jQuery 1.9 +中，“悬停”事件是deprecated支持标准的“mouseenter mouseleave” “电话。因此，您的事件绑定声明现在应如下所示：

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

Answer 3

单独取消绑定mouseenter和mouseleave事件，或取消绑定元素上的所有事件。

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

或

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

Answer 4

unbind（）不适用于硬编码的内联事件。

因此，例如，如果要取消绑定鼠标悬停事件 <div id="some_div" onmouseover="do_something();">，我发现$('#some_div').attr('onmouseover','')是实现目标的快捷方式。

Answer 5

对于使用 .live（）附加的事件，另一种解决方案是 .die（）。

例：

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

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

您可以在此处找到一个很好的参考：Exploring jQuery .live() and .die()

（对不起我的英文：“＆gt;）

Answer 6

所有悬停在幕后操作都绑定到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);
  });

});

Answer 7

您可以使用on

删除off附加的特定事件处理程序

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

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

使用此功能，您只会删除 handlerFunction
另一个好的做法是为多个附加事件设置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");

Answer 8

我发现这可以作为.hover（）

的第二个参数（函数）

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

第一个函数（.hover（）的参数）是mouseover并将执行你的代码。第二个参数是mouseout，它将解除悬停事件与#yourId的绑定。您的代码只会执行一次。

如何在jQuery中取消绑定“悬停”？

8 个答案: