Paper.js Distinguish Click and Drag Events

Question

I have a click event handler and a mousedrag event handler for a Paper.js Item.

item.on('click', function(event) {
  event.stopPropagation();
  event.preventDefault();
  //...  
});

item.on('mousedrag', function(event) {
  event.stopPropagation();
  event.preventDefault();
  //...  
});

Whenever I cause a mousedrag event a click event is also generated. How can I prevent this?

Answer 1

When the mouse is clicked then released a click event is generated. When the mouse is held down and dragged, drag events are generated. I generally implement this by setting events on 'mousedown' and 'mouseup' in addition to 'mousedrag'.

Playing around I've found that if you return false from your 'mousedrag' event handler it will suppress further events, i.e., neither 'mouseup' nor 'click' will be invoked. Here's a sketch illustrating mouse events. If you uncomment the return false in the 'mousedrag' handler you will not get the 'mouseup' or 'click' events.

The following is example code for how I usually implement it - I didn't discover that returning false from the handler suppressed further processing until looking at the code tonight.

var drag;

view.on('mousedown', function(e) {
    drag = false;
});

view.on('mousedrag', function(e) {
    drag = true;
    // do whatever else you need to when dragging the mouse
});

view.on('mouseup', function(e) {
    // see if it was just a click and handle that
    if (drag) {
        // handle the end of a drag
    } else {
        // do whatever a click down/up without drag needs to do
    }

});