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

但为什么不使用可拖动的 ui 呢?并为自己节省一些时间

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

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