如何取消绑定().hover()但不取消绑定.click()? [英] How to unbind() .hover() but not .click()?

问题描述

我正在使用Bootstrap 3创建站点，并且还使用脚本通过.hover()函数使下拉菜单显示在悬停菜单上.我试图通过使用enquire.js在小型设备上防止这种情况.我正在尝试使用以下代码在元素上解除.hover()事件的绑定:

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

这取消了该脚本的.hover的绑定，但是显然，它还删除了.click()事件(或任何引导程序使用的事件)，现在当我将鼠标悬停或单击该元素时，什么也没有发生.

所以我只想删除该脚本中的.hover()元素，而不更改其他内容.

非常感谢您的帮助.

谢谢！

这是我如何调用悬停函数的处理程序:

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

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

我正在尝试将其与此代码解除绑定.

$('.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.提供的代码效果最好；但是，当我调整窗口大小时，直到从任何方向到达断点，效果都不会改变.也就是说，如果将窗口加载到800像素以上，则会出现悬停效果，但是如果我将窗口缩小，则仍会保留.我试图用window.load和window.resize调用这些函数，但仍然相同.

我实际上是在悬停而不是单击的情况下创建Bootstrap下拉菜单.这是更新的jsFiddle: http://jsfiddle.net/CR2Lw/2/

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

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

解决方案

我仍然不了解您打算如何在将鼠标悬停在dropdown元素上时显示它，以关闭"该dropmen菜单，部分原因是没有足够的代码在您的问题中，但这与该答案无关.

我认为一种更简单的方法来处理mousenter事件处理方法不是通过使用off()/on()在特定的断点处取消绑定/绑定事件，而是仅在事件发生时进行简单检查触发.换句话说，是这样的:

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

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

这是一个有效的小提琴: http://jsfiddle.net/jme11/g9JJk/

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

点击以解散菜单不需要检查，因为它没有在折叠"菜单下拉菜单上触发时看到的有害影响.

从UX的角度来看，我仍然不喜欢这样.我宁愿单击打开菜单，也不愿单击以关闭在悬停事件中打开的菜单，但是也许您对触发hide方法的其他方式有一些魔术计划.也许您正计划注册一个mousemove事件，以检查鼠标是否在.dropdown + 50px + .dropdown-menu范围之内或类似的东西...我真的很想知道您打算如何做(好奇心使我丧命).也许您可以更新代码以显示最终结果.

感谢您发布解决方案！

I'm creating a site using Bootstrap 3, and also using a script that makes the dropdown-menu appear on hover using the .hover() function. I'm trying to prevent this on small devices by using enquire.js. I'm trying to unbind the .hover() event on the element using this code:

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

This unbinds the .hover of that script but apparently it also removes the .click() event(or whatever bootstrap uses), and now when I hover or click on the element, nothing happens.

So I just want to how I can remove the .hover() on that element, that is originating from that script, but not change anything else.

Would really appreciate any help.

Thanks!

Edit: Here is how I'm calling the handlers for the hover functions:

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

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

I'm trying to unbind them with this code.

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

But its not working.

Please help!

**Edit2: ** Based on the answer of 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();
});

The code that Tieson T. provided worked the best; however, when I resize the window, until I reach the breakpoint from any direction, the effect doesn't change. That is, if the window is loaded above 800px, the hover effect will be there, but if I make the window smaller it still remains. I tried to invoke the functions with window.load and window.resize but it is still the same.

Edit 3: I'm actually trying to create Bootstrap dropdown on hover instead of click. Here is the updated jsFiddle: http://jsfiddle.net/CR2Lw/2/

Please note: In the jsFiddle example, I could use css :hover property and set the dropdow-menu to display:block. But because the way I need to style the dropdown, there needs to be some space between the link and the dropdown (it is a must), and so I have to find a javascript solution. or a very tricky css solution, in which the there is abot 50px space between the link and the dropdown, when when the user has hovered over the link and the dropdown has appeared, the dropdown shouldn't disappear when the user tries to reach it. Hope it makes sense and thanks.

Edit 4 - First possible solution: http://jsfiddle.net/g9JJk/6/

解决方案

I still don't understand how you intend to "dismiss" the dropdown-menu once it is displayed upon mousing over the dropdown element partly because there's not enough code in your question, but that's sort of irrelevant to this answer.

I think a much easier way to approach the mousenter event handling portion is not by using off()/on() to unbind/bind events at a specific breakpoints, but rather to do just do a simple check when the event is triggered. In other words, something like this:

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

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

Here's a working fiddle: http://jsfiddle.net/jme11/g9JJk/

Basically, in the mouseenter event I'm checking if the menu toggle is displayed, but you can check window.width() at that point instead if you prefer. In my mind, the toggle element's display value is easier to follow and it also ensures that if you change your media query breakpoints for the "collapsed" menu, the code will remain in sync without having to update the hardcoded values (e.g. 768px).

The on click to dismiss the menu doesn't need a check, as it has no detrimental effects that I can see when triggered on the "collapsed" menu dropdown.

I still don't like this from a UX perspective. I would much rather have to click to open a menu than click to close a menu that's being opened on a hover event, but maybe you have some magic plan for some other way of triggering the hide method. Maybe you are planning to register a mousemove event that checks if the mouse is anywhere within the bounds of the .dropdown + 50px + .dropdown-menu or something like that... I would really like to know how you intend to do this (curiosity is sort of killing me). Maybe you can update your code to show the final result.

EDIT: Thanks for posting your solution!

这篇关于如何取消绑定().hover()但不取消绑定.click()?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！