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

我需要一个函数来确定用户是否单击、双击或拖动鼠标。

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

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

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

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

我怎样才能将其翻译成代码？帮助表示赞赏。

像下面这样的东西应该可以帮助你开始，我使用 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;
     }
  });
});