如何将短拖动事件解释为点击答案

【问题标题】：How to interpret short drag events as clicks如何将短拖动事件解释为点击
【发布时间】：2013-02-19 23:46:49
【问题描述】：

是否有一种简洁的方法可以将短时间、短时间的拖动事件解释为点击事件？例如，我正在使用 d3 并定义以下事件，这些事件应该捕获 SVG 上的单击、鼠标移动（无拖动）和拖动事件，以及处理此类事件的结束：

@svg
  .on("click", @plot_click )
  .on("mousemove", @plot_mousemove )
  .on("mousedown.drag", @plot_drag )
  .on("touchstart.drag", @plot_drag )

# Global event detectors
d3.select("body")      
  .on("mouseup.drag", @mouseup)
  .on("touchend.drag", @mouseup)

但是，鼠标不完美的短点击事件仍然注册为非常小的拖动事件，这对我的界面来说非常烦人。有什么好的方法可以解决这个问题？

虽然我使用 d3 定义事件处理程序，但我愿意为此采用任何通用的 Javascript 方法。

【问题讨论】：

标签： javascript d3.js events drag-and-drop dom-events

【解决方案1】：

在 mousedown 时，将光标位置保存到全局变量 (mousePosOnLastDown)。
在 mouseup 时，检查光标是否移动得足够远。
- 如果有，请执行拖动操作。
- 如果没有，请执行点击操作。
- 清除 mousedown 光标位置。

从 OP 编辑：根本不使用 click 动作，而只使用 mousedown/mouseup 动作是有意义的。我相应地改变了你的答案。

【讨论】：