javascript - 如何取消绑定(bind)().hover()而不是.click()？

Question

我正在使用 Bootstrap 3 创建一个站点，并且还使用了一个脚本，该脚本使用 .hover() 函数使下拉菜单出现在悬停时。我试图通过使用 enquire.js 在小型设备上防止这种情况。我正在尝试使用以下代码取消绑定(bind)元素上的 .hover() 事件:

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

这解除了该脚本的 .hover 绑定(bind)，但显然它也删除了 .click() 事件(或任何 Bootstrap 使用的事件)，现在当我悬停或单击该元素时，没有任何反应。

所以我只想知道如何删除该元素上的 .hover()，该元素源自该脚本，但不更改任何其他内容。

非常感谢任何帮助。

谢谢!

编辑:下面是我如何调用悬停函数的处理程序:

$('.dropdown').hover(handlerIn, handlerOut);

function handlerIn(){
   // mouseenter code
}
function hideMenu() {
   // mouseleave code
}

我正在尝试使用此代码解除绑定(bind)。

$('.dropdown').unbind('mouseenter', showMenu);
$('.dropdown').unbind('mouseleave', hideMenu);

但它不起作用。

请帮忙!

**Edit2:**基于 Tieson T. 的回答:

function dropdownOnHover(){
  if (window.matchMedia("(min-width: 800px)").matches) {
    /* the view port is at least 800 pixels wide */
    $('.dropdown').hover(handlerIn, handlerOut);

    function handlerIn(){
       // mouseenter code
    }
    function hideMenu() {
       // mouseleave code
    }
  }
}

$(window).load(function() {
  dropdownOnHover();
});

$(window).resize(function() {
  dropdownOnHover();
});

Tieson T. 提供的代码效果最好；然而，当我调整窗口大小时，直到我从任何方向到达断点，效果都不会改变。也就是说，如果窗口加载到 800px 以上，悬停效果就会存在，但如果我将窗口缩小，它仍然存在。我尝试使用 window.load 和 window.resize 调用这些函数，但它仍然是一样的。

编辑 3: 我实际上是在尝试在悬停时创建 Bootstrap 下拉菜单而不是单击。这是更新的 jsFiddle:http://jsfiddle.net/CR2Lw/2/

请注意:在 jsFiddle 示例中，我可以使用 css :hover 属性并将 dropdow-menu 设置为 display:block。但是因为我需要设置下拉菜单样式的方式，链接和下拉菜单之间需要有一些空间(这是必须的)，所以我必须找到一个 javascript 解决方案。或一个非常棘手的 css 解决方案，其中链接和下拉菜单之间有大约 50px 的空间，当用户将鼠标悬停在链接上并且出现下拉菜单时，当用户尝试访问它时下拉菜单不应消失.希望这是有道理的，谢谢。

编辑 4 - 第一个可能的解决方案: http://jsfiddle.net/g9JJk/6/

Answer 1

可能更容易有选择地应用悬停，而不是稍后尝试将其删除。您可以使用 window.matchMedia并且仅在浏览器的屏幕尺寸暗示桌面浏览器(或较大的平板电脑)时才应用您的脚本:

if (window.matchMedia("(min-width: 800px)").matches) {
    /* the view port is at least 800 pixels wide */
    $('.dropdown').on({
        mouseenter: function () {
            //stuff to do on mouse enter
        },
        mouseleave: function () {
            //stuff to do on mouse leave
        }
    });
}
else{
    $('.dropdown').off('mouseenter, mouseleave');
}

由于它不是 100% 支持的，因此您希望为那些没有 native 支持的浏览器添加一个 polyfill:https://github.com/paulirish/matchMedia.js/

如果您使用的是 Moderizr，那么该 polyfill 已经包含在该库中，所以您可以开始使用了。