Javascript，单击，双击并拖动同一元素

Question

我需要一个函数来判断用户是单击、双击还是拖动鼠标。

由于这一切都发生在同一个画布上，使用正常事件是行不通的。我通过谷歌找到了这个：

不建议将处理程序同时绑定到 click 和 dblclick 相同元素的事件。触发的事件顺序各不相同 从浏览器到浏览器，其中一些接收两个点击事件和 其他只有一个。如果一个界面对单次反应不同 并且无法避免双击，那么 dblclick 事件应该是 在点击处理程序中模拟。我们可以通过保存一个 处理程序中的时间戳，然后将当前时间与 保存后续点击的时间戳。如果差异很小 够了，我们可以把点击当成双击。

我怎样才能以一种好的方式实现这一目标？

先看看点击是否按下（拖拽）？发布时将其视为点击？然后如果再次点击双击？

如何将其转换为代码？帮助表示赞赏。

Answer 1

我可能会通过在点击事件中放置一个计时器来检查是否有其他点击来解决这个问题。

time = 0
if(new Date().getTime() < time + 400) {
  // Double click
  throw new Error("Stop execution");
}
if(!!time)
  throw new Error("Stop execution");
time = new Date().getTime();
// Single click

类似的东西。未经测试，由于某些奇怪的原因，我现在无法思考。

Answer 2

类似下面的东西应该可以让你开始，我使用 jQuery 只是为了更容易显示，这可以用直接的 JS 来实现，只是噪音很大

$(function() {

  var doubleClickThreshold = 50;  //ms
  var lastClick = 0;
  var isDragging = false;
  var isDoubleClick = false;

  $node = ("#mycanvas");
  $node.click(function(){
    var thisClick = new Date().getTime();
    var isDoubleClick = thisClick - lastClick < doubleClickThreshold;
    lastClick = thisClick;
  });

  $node.mousedown(function() {
    mouseIsDown = true;
  });

  $node.mouseUp(function() {
    isDragging = false;
    mouseIsDown = false;
  });

  // Using document so you can drag outside of the canvas, use $node
  // if you cannot drag outside of the canvas
  $(document).mousemove(function() {
     if (mouseIsDown) {
       isDragging = true;
     }
  });
});