Javascript 如何解除绑定（）。悬停（）但不。单击（）？

我正在使用bootstrap3创建一个站点，并且使用一个脚本，使用.hover（）函数使下拉菜单显示在hover上。我试图通过使用enquire.js在小型设备上防止这种情况。我正在尝试使用以下代码解除元素上的.hover（）事件绑定：

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

这将解除该脚本的.hover的绑定，但显然它也会删除.click（）事件（或bootstrap使用的任何事件），现在当我悬停或单击该元素时，什么都不会发生

因此，我只想知道如何删除该元素上的.hover（），该元素源自该脚本，但不更改任何其他内容

非常感谢您的帮助

谢谢

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

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

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

我正试着用这个代码解开它们

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

但它不起作用

请帮忙

**编辑2:*根据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:我实际上是想在悬停状态下创建引导下拉列表，而不是单击。以下是更新的JSFIDLE：

请注意：在jsFiddle示例中，我可以使用css:hover属性并将dropdow菜单设置为display:block。但是因为我需要设计下拉列表的样式，所以链接和下拉列表之间需要有一些空间（这是必须的），所以我必须找到一个javascript解决方案。或者是一个非常棘手的css解决方案，其中链接和下拉列表之间有一个50px的空间，当用户悬停在链接上并且下拉列表出现时，当用户试图到达它时，下拉列表不应该消失。希望它有意义，谢谢

---

编辑4-第一种可能的解决方案：

可能更容易有选择地应用悬停，而不是稍后尝试删除悬停。只有当浏览器的屏幕尺寸意味着桌面浏览器（或更大的平板电脑）时，才能使用并应用脚本：

因为它不是100%支持的，所以您希望为那些没有本机支持的浏览器添加polyfill：

---

如果您使用的是Moderizer，则polyfill已经包含在该库中，因此您可以使用它。

我仍然不明白，当鼠标移到下拉元素上时，如果下拉菜单显示出来，您打算如何“关闭”它，部分原因是您的问题中没有足够的代码，但这与此答案无关

我认为更容易处理MousCenter事件处理部分的方法不是使用off（）/on（）在特定断点处解除绑定/绑定事件，而是在触发事件时进行简单检查。换句话说，类似这样的事情：

$('.dropdown').on('mouseenter', function() {
    if($('.navbar-toggle').css('display') == 'none') {
       $(this).children('.dropdown-menu').show();
    };
});

$('.dropdown-menu').on('click', function() {
    $(this).hide();
});

这是一把小提琴：

基本上，在mouseenter事件中，我检查是否显示了菜单切换，但是如果愿意，您可以在该点检查window.width（）。在我看来，toggle元素的显示值更容易理解，而且它还确保如果您更改“折叠”菜单的媒体查询断点，代码将保持同步，而无需更新硬编码值（例如768px）

点击关闭菜单不需要勾选，因为它没有在“折叠”菜单下拉菜单上触发时所能看到的有害影响

从用户体验的角度来看，我仍然不喜欢这样。我宁愿单击打开菜单，也不愿单击关闭在悬停事件中打开的菜单，但也许您有一些神奇的计划，可以通过其他方式触发隐藏方法。可能您正计划注册一个mousemove事件，检查鼠标是否在.dropdown+50px+下拉菜单或类似的范围内。。。我真的很想知道你打算怎么做（好奇心有点让我受不了）。也许您可以更新代码以显示最终结果

---

编辑：感谢发布您的解决方案

嗨。谢谢你的回答。我想我已经非常接近解决方案了；但是，请查看我更新的问题，了解我在调整窗口大小时面临的问题；调整视口的大小不是一个页面请求，因此DOM不会改变。那么如何才能使该元素上的hover（）函数只在大于800px的设备上工作？@user3570481尝试上面的编辑；注意从

.hover

到

.on

，然后如果视口不再匹配，我们使用

.off

删除这些处理程序。不，它仍然以相同的方式运行，在窗口调整大小时不会切换到另一个。我不明白如果CSS不匹配，JS为什么会工作。你能帮助我理解你在.dropdown类上的mouseenter/mouseleave与.dropdown:hover的行为有什么不同吗？我在这里遗漏了什么？事实上，css是有效的。因为我的设计限制，我不能使用它。基本上，链接和下拉列表出现的位置之间存在一个“间隙”，因此当用户试图转到下拉列表时（当用户将鼠标悬停在链接上时，下拉列表出现之后），下拉列表将消失，因为链接自然不会保持悬停状态，因为用户越过了这个间隙，去接触下拉列表。我理解。所以，如果你在mouseleave上隐藏菜单，同样的情况也会发生。。。这是我不明白的部分。我的意思是，你实际上并没有展示你在处理程序中所做的事情，但是你在处理程序中所做的似乎会产生完全相同的行为，不是吗？是否缺少功能？也许handlerOut就是我所缺少的，以及hideMenu的实际工作原理

$('.dropdown').on('mouseenter', function() {
    if($('.navbar-toggle').css('display') == 'none') {
       $(this).children('.dropdown-menu').show();
    };
});

$('.dropdown-menu').on('click', function() {
    $(this).hide();
});