检测鼠标在单击时的移动，并检测双击

目前，当一个人点击画布时，以及当一个人单击并拖动某物时，我已经实现了不同的操作。我通过将mousedown事件绑定到画布来实现这一点，在该函数中，拖动和mouseup是有区别的。这非常有效，但当我还想支持双击元素时，我遇到了一个问题。

实现这一点的正常方式如下：

$(canvas).click(function1);
$(canvas).dblclick(function2);

但我没有这样实现，因为我必须检查鼠标是否移动（即拖动）。这是我目前的实现方式：

var handler = {
    clicked:function(e){
       ...
       $(canvas).bind('mousemove', handler.dragged);
       $(window).bind('mouseup', handler.dropped);
    },
    dragged:function(e){
       ...
    },
    dropped:function(e){
      function loop(ctr){
         if (ctr < 50) {
           setTimeout(function(){loop(ctr+1)}, 2);
           } else {
           $(canvas).mousedown(handler.clicked);
           handler.singleClick(e);
          }
      }
      $(canvas).mousedown(handler.doubleclicked);
      loop(0);
     },
     doubleClick: function(e){
       ...
     },
     singleClick: function(e){
       ...
         }                
   }
$(canvas).mousedown(handler.clicked);

我试图通过实现drop函数来结合这两件事（识别拖动和双击），该函数等待一段时间来侦听另一次单击，如果在这段时间内没有发生，则转到singleclick函数。目前，它还没有识别出第二次点击。

我想有更好的方法可以做到这一点吗？