jQuery -在拖动时停止悬停事件

Question

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

我遇到的问题是，我希望在您拖动鼠标时禁用悬停事件。目前，如果你拖动一张图片，它会触发你悬停的其他图片的所有悬停菜单。

$('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事件是当你点击图像时清除菜单的事件。我需要一些东西，将禁用悬停，同时移动鼠标，与键仍然按下(拖动)。

我尝试了一些东西，但没有成功，有谁有建议吗？

Answer 1

有数以百计的方法。

    // 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事件上...然后，在鼠标按下时，甚至可以取消悬停事件。顺便说一句，查找绑定和解绑

但是为什么不使用可拖动的ui呢？并为自己节省一些时间和精力

Answer 2

.hover-off {
  pointer-events: none;
}

...to救援: Paul Lewis + thecssninja.com，这是一个很好的一站式解决方案。

http://www.thecssninja.com/css/pointer-events-60fps