Paper.js区分单击和拖动事件

Question

对于一个Paper.js项目，我有一个单击事件处理程序和一个Paper.js事件处理程序。

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

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

每当我导致一个mousedrag事件时，也会生成一个单击事件。我怎么才能阻止这一切？

Answer 1

当鼠标被点击，然后释放一个点击事件会产生。当鼠标被按住并拖动时，将生成拖动事件。我通常通过在“mousedown”和“mouseup”上设置事件来实现这一点。

我发现，如果您从'mousedrag‘事件处理程序返回false，它将抑制进一步的事件，即既不会调用'mouseup’也不会调用'click‘。这里有一个说明鼠标事件的草图。如果在“mousedrag”处理程序中取消对return false的注释，就不会得到“mouseup”或“click”事件。

下面是我通常如何实现它的示例代码--直到今晚查看代码，我才发现从处理程序返回false会抑制进一步的处理。

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
    }

});