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

Question

我有一个单击事件处理程序和一个 Paper.js 项目的 mousedrag 事件处理程序。

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

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

每当我引发 mousedrag 事件时，也会生成一个点击事件。我该如何防止这种情况？

Answer 1

当鼠标被点击然后松开时，会产生一个点击事件。当鼠标被按住并拖动时，会产生拖动事件。除了 'mousedrag'.

之外，我通常通过在 'mousedown' 和 'mouseup' 上设置事件来实现这一点

我发现如果你从你的 'mousedrag' 事件处理程序中 return false 它将抑制进一步的事件，即 'mouseup' 和 'click' 都不会被调用。这是说明 mouse events 的草图。如果您取消注释 'mousedrag' 处理程序中的 return false，您将不会获得 'mouseup' 或 'click' 事件。

以下是我通常如何实现它的示例代码 - 在今晚查看代码之前，我没有发现处理程序的 returning 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
    }

});

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

Paper.js Distinguish Click and Drag Events

javascript

events

drag

dom-events

paperjs