单击时检测鼠标移动并检测双击

时间:2012-01-11 13:46:14

标签: javascript jquery javascript-events

目前我已经针对某个人点击画布以及当某人点击并拖动某些内容时实施了不同的操作。我通过将mousedown事件绑定到我的画布来完成此操作,并且在该函数中,拖放或鼠标之间存在差异。这非常好用,但是当我还想支持双击元素时,我遇到了问题。

实现这个的常规方法是这样的:

$(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);

我尝试将这两件事(识别拖动和双击)结合起来,通过实现一个等待一段时间来监听另一次点击的掉落函数,如果在那段时间内没有发生,它会转到单击功能。目前尚未识别出第二次点击。

我认为有更好的方法可以做到这一点? 提前致谢

1 个答案:

答案 0 :(得分:1)

你可能想看看这个:
http://threedubmedia.com/code/event/drag

除了.drag().click()之外,它还为您提供了其他功能.dblclick()

Theres也是一个下降版本:
http://threedubmedia.com/code/event/drop