在同一个元素中使用Javascript、单击、双击和拖动

Question

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

因为这一切都发生在同一个画布上，所以使用正常事件是不起作用的。我通过谷歌找到了这个：

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

我怎样才能以一种好的方式做到这一点？

首先查看是否按下了单击（用于拖动）？当它被释放时，是否将其视为点击？然后如果再次点击双击？

如何将其转换为代码？感谢您的帮助。

Answer 1

下面的内容应该会让你开始，我使用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;
     }
  });
});

Answer 2

我可能会在点击事件中设置一个计时器来检查是否有另一次点击。

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

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