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

How to interpret short drag events as clicks

本文关键字:解释 单击 事件 拖动      更新时间:2023-09-26

有没有一种简洁的方法可以将短长度、短持续时间的拖动事件解释为单击事件?例如,我正在使用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. 在mousedown时,将光标位置保存到全局变量(mousePosOnLastDown)
  2. 在mouseup上,检查光标是否移动了足够远。
    • 如果有,请执行拖动操作
    • 如果没有,请执行单击操作
    • 清除鼠标向下光标的位置

从OP编辑:根本不使用点击操作,只使用鼠标向下/鼠标向上操作是有意义的。我相应地改变了你的回答