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

时间:2013-02-19 23:46:50

标签: javascript events javascript-events drag-and-drop d3.js

是否有一种简洁的方法可以将短长度,短时拖动事件解释为点击事件?例如,我正在使用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方法。

1 个答案:

答案 0 :(得分:1)

  1. 在mousedown上,将光标位置保存到全局变量(mousePosOnLastDown)。
  2. 在mouseup上,检查光标是否移动得足够远。
    • 如果有,请执行拖动操作。
    • 如果没有,请执行点击操作。
    • 清除mousedown光标位置。
  3. 从OP编辑:根本不使用点击操作,只有mousedown / mouseup操作才有意义。我相应地改变了你的答案。