jQuery - 拖动时停止悬停事件 [英] jQuery - stopping a hover event while dragging

问题描述

我正在创建一个拖放图像环境，如果将鼠标悬停在图像上，则会弹出一个小菜单。如果您点击并拖动图像，您可以重新排序。

I'm creating a drag and drop image environment, where if you hover over an image, a small menu pops up overtop of it. if you click and drag the image, you can reorder them.

我遇到的问题是，我希望在拖动时停用悬浮事件。目前，如果您拖动图像，它会触发您悬停在其他图像上的所有悬浮菜单。

The problem I'm having is, I want the hover event to be disabled when you're dragging around. Currently if you drag an image around, it triggers all the hover menus on the other images you hover over.

$('ul.imglist li').mousedown(
  function() { 
    $(this).find('ul')
      .fadeOut(100); 
  });

// Image actions menu
$('ul.imglist li').hover(
  function() { 
    $(this).find('ul')
      .css('display', 'none')
      .fadeIn('fast')
      .css('display', 'block');
  },
  function() { 
    $(this).find('ul')
      .fadeOut(100); 
  });   

我在这里有一点jQuery，底部的悬停事件是我要在拖动时禁用的事件，当您点击图像时，顶部的mousedown是什么摆脱了菜单。我需要一些可以在鼠标移动的同时停用鼠标悬停的按键，但仍然按下（拖动）键。

I have a bit of jQuery here, the bottom hover event is the one I want to disable while dragging, the top mousedown is what gets rid of the menu when you click on the image. I need something that will disable the hover while moving the mouse around, with the key still pressed down (dragging).

我没有运气尝试过几件事情，有没有人有一个建议？

I tried a few things with no luck, does anyone have a suggestion?

推荐答案

有数百种方式。

    // Image actions menu
$('ul.imglist li').hover(
  function() { 
    $(this).find('ul')
      .css('display', 'none')
      .fadeIn('fast')
      .css('display', 'block');
  },
  function() { 
    $(this).find('ul')
      .fadeOut(100); 
  }); 

应该在mouseup事件...
然后在mousedown即使你可以取消悬停事件。
通过查找绑定和解除绑定的方式

should be on mouseup event... then on mousedown even you can cancel the hover event. by the way look up binding and unbinding

但是为什么不使用draggable ui？
并节省自己一些时间努力

but why not use the draggable ui ? and save yourself some time end effort

这篇关于jQuery - 拖动时停止悬停事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！