Paper.js 层事件与工具事件 - 不同的行为答案

【问题标题】：Paper.js Layer Event versus Tool Event - Different BehaviorPaper.js 层事件与工具事件 - 不同的行为
【发布时间】：2015-11-16 21:18:46
【问题描述】：

注意这两个草图，one 具有预期和期望的行为，one 没有。当您打开这些草图时，您会看到一个带有一些文字的图像。文本可拖动到新位置。图像在重新定位期间应保持静止。在第一个草图中它可以，在第二个它没有。

两个草图的代码不同之处在于，在第一个中，事件是在活动层上建立的：

project.activeLayer.onMouseDrag = function(event) {
    view.center = changeCenter(paper.view.center, event.delta.x, event.delta.y, 0.7);
}

在第二个中，它建立在我所理解的全球paper.tool：

function onMouseDrag(event) {
    view.center = changeCenter(paper.view.center, event.delta.x, event.delta.y, 0.7);
}

在我看来这无关紧要，因为在 text mousedrag 侦听器中我正在停止传播事件：

event.stopPropagation();

但是，这似乎只在第一个草图中生效，而不是第二个。为什么会这样？

【问题讨论】：

非常孤立的问题，用简洁的代码来说明它。

标签： javascript events dom-events paperjs

【解决方案1】：

不同之处在于，声明“全局”函数onMouseDrag 会导致纸张创建Tool，并且无论正常的处理程序链是否请求停止传播，都会在处理结束时调用工具事件。（我说“全局”是因为当纸执行纸质脚本时，它会将您的代码包装在一个具有自己作用域的函数中。然后它将这些“全局”函数传递回该函数返回的对象中的纸上。）如果有任何“全局”函数被宣布为纸张，然后创建一个处理它们的工具。并且无论您的处理程序是否终止处理，都会在事件处理结束时调用该工具。

以下代码是paper的View.js模块中的相关代码：

function handleMouseMove(view, point, event) {
    view._handleEvent('mousemove', point, event);
    var tool = view._scope.tool;
    if (tool) {
        tool._handleEvent(dragging && tool.responds('mousedrag')
                ? 'mousedrag' : 'mousemove', point, event);
    }
    view.update();
    return tool;
}

项目的处理程序（您的PointText 处理程序）正在由view._handleEvent() 调用，而通过定义“全局”onMouseDrag 隐式创建的工具被调用，而不管view._handleEvent 处理的结果如何。

只有在使用 paperscript 并且声明了全局函数之一时才会出现此问题，例如 onMouseDrag。

【讨论】：