javascript - Paper.js 区分点击和拖动事件

Question

我有一个用于 Paper.js 项目的 click 事件处理程序和一个 mousedrag 事件处理程序。

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

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

每当我引发 mousedrag 事件时，也会生成单击事件。我怎样才能防止这种情况发生？

Answer 1

当鼠标单击然后释放时，会生成单击事件。当按住鼠标并拖动时，会生成拖动事件。我通常通过在“mousedown”和“mouseup”以及“mousedrag”上设置事件来实现此目的。

我发现，如果您从“mousedrag”事件处理程序返回 false，它将抑制进一步的事件，即“mouseup”和“click”都不会被调用。这是说明 mouse events 的草图。如果您取消注释“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
    }

});