CODEWITHSUNDEEP
javascriptjqueryjquery-events
JasperTack
JasperTack

Reputation: 4447

Detect move of mouse while clicked and detect doubleclick

for the moment I have implemented different actions for when a person clicks on a canvas and when a person clicks and drags something. I did this by binding the mousedown event to my canvas and in that function there is made the difference between a drag or a mouseup. This works very good, but I have a problem when I also want to support doubleclicking on elements.

The normal way to implement this is like this:

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

but I didn't implemented that way because I had to check whether or not the mouse moved (i.e. dragged). This is my current implementation:

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

I tried to combine those two things (recognition of dragging and doubleclick) by implementing the dropped-function which waits for a period of time to listen for another click and if it didn't occur within that period it goes to the singleclick function. For the moment this not yet recognizes the second click.

I assume that there exist better ways to do this?

Upvotes: 0

Views: 669

Answers (1)

bardiir
bardiir

Reputation: 14782

You might want to look at this:
http://threedubmedia.com/code/event/drag

It provides you with additional functionality .drag() in addition to .click() and .dblclick().

Theres also a drop version:
http://threedubmedia.com/code/event/drop

Upvotes: 1

Related Questions