jQuery - 拖动时停止悬停事件答案

【问题标题】：jQuery - stopping a hover event while draggingjQuery - 拖动时停止悬停事件
【发布时间】：2010-07-26 19:02:02
【问题描述】：

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

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

$('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 是当您单击图像时摆脱菜单的事件。我需要一些可以在移动鼠标时禁用悬停的东西，而键仍然按下（拖动）。

我尝试了一些没有运气的东西，有人有建议吗？

【问题讨论】：

标签： jquery jquery-ui drag-and-drop hover jquery-events

【解决方案1】：

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

...救援：Paul Lewis + thecssninja.com 提供非常好的一站式解决方案。

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

【讨论】：

【解决方案2】：

有数百种方法。

    // 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 上，您甚至可以取消悬停事件。顺便查一下绑定和解绑

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

【讨论】：