Paper.js Mouseup 事件被工具禁止

Question

我正在使用 Paper.js，我需要在光栅上的 mouseup 上做一些事情。但是，当我使用全局工具 space.

时，该事件似乎并未触发

注意这个 sketch，点击并拖动会产生如下日志：

raster mousedown

raster mousedrag

... [more "raster mousedrag"] ...

raster mousedrag

raster mouseup

表明 raster.on('mouseup' function() {...}); 被正确击中，正如预期的那样。

然而，在这个sketch中，它包含显示拖动区域的功能，raster.on('mouseup' function() {...});没有被正确点击。请注意，该日志不包含“raster mouseup”，仅包含“raster mousedown”和“raster mousedrag”。

为什么在第二个实例中 mouseup 不在光栅上触发？我如何调整第二个草图中的代码以使其触发？

Answer 1

好吧，简单的答案是问题是从未调用 on('mouseup', ...) 处理程序。纸质代码获得最近的点击，即您正在绘制的红色矩形，并检查它是否响应 'mouseup' 事件。它没有。然后它检查父链，红色矩形的父链是层，所以它也没有通过 .responds 测试。因为栅格与栅格关联的红色矩形处理程序处于同一级别，所以永远不会调用它。

最简单的答案是使用全局工具在 view 而不是 raster 上安装处理程序，例如

function onMouseUp(event) {
    console.log('vup');
}

查看paperjs代码（在CanvasView.js）：

function callEvent(view, type, event, point, target, lastPoint) {
    var item = target,
        mouseEvent;

    function call(obj) {
        if (obj.responds(type)) {
            if (!mouseEvent) {
                mouseEvent = new MouseEvent(type, event, point, target,
                        lastPoint ? point.subtract(lastPoint) : null);
            }
            if (obj.emit(type, mouseEvent) && mouseEvent.isStopped) {
                event.preventDefault();
                return true;
            }
        }
    }

    while (item) {
        if (call(item))
            return true;
        item = item.getParent();
    }
    if (call(view))
        return true;
    return false;
}

Paper.js Mouseup 事件被工具禁止

Paper.js Mouseup Event Inhibited by Tool

javascript

mouseevent

dom-events

paperjs