PaperJS onDoubleClick 不适用于组？

Question

查看 this Sketch。 onMouseDown 事件工作得很好。当您单击两个圆圈中的任何一个时，它们会从红色变为蓝色。

然而，当您尝试双击它们时，即使有一个 onDoubleClick 事件指定它们应该变黑，也没有任何反应。这是为什么？？

代码如下：

var path = new Path.Circle(view.center - 100, 50);
var path2 = new Path.Circle(view.center - 50, 50);

// Create a group from the two paths:
var group = new Group([path, path2]);

// Set the stroke color of all items in the group:
group.strokeColor = 'black';
group.fillColor = 'red';

// Move the group to the center of the view:
group.position = view.center;

group.onMouseDown = function(event){
 group.fillColor = 'blue';
}

group.onDoubleClick = function(event){
 group.fillColor = 'black';
}

Answer 1

这是 PaperJS (https://github.com/paperjs/paper.js/issues/834) 中的未决问题。如果您使用调试器逐步执行 PaperJS 代码，那么您会发现子元素（在本例中为路径元素）会将事件冒泡到组元素。子元素决定 mouseup 动作是冒泡为点击事件还是双击事件。在当前的 PaperJS 代码中，当子元素本身具有 onDoubleClick 事件处理程序时，子元素只会冒泡双击事件。由于 PaperJS 中的这个问题，当您期待双击事件时，您的组元素会引发点击事件。在 PaperJS 中解决此问题之前，您可以通过将空的 onDoubleClick 事件处理程序附加到子元素来解决此问题。例如...

path.onDoubleClick = function(event){};
path2.onDoubleClick = function(event){};
group.onDoubleClick = function(event){
    group.fillColor = 'black';
};

Answer 2

问题是 paperjs 没有检查父链上的 onDoubleClick 事件（或者可能该论文没有通过组向下传播 onDoubleClick 事件，具体取决于实现选择）。

但首先，如何修复它。我会采用以下两种方法之一：

在组上设置 mousedown 和 mouseup 处理程序并实现您自己的双击逻辑。（类似于 sketch）。
在每个圈子上设置 doubleclick 个事件。

我通常做第一个，因为它给了我可见性和控制力。

想看paperjs的代码，逻辑从CanvasView.js的第195行开始。

您可以看到 onMouseDrag 事件检查父链以查看祖先是否处理该事件：

while (dragItem && !dragItem.responds('mousedrag'))
    dragItem = dragItem._parent;

但是 dblClick 的相应代码只检查被击中的实际项目：

dblClick = lastItem == item && (Date.now() - clickTime < 300);

圈子没有 doubleClick 事件的处理程序，所以稍后，在 mouseup，dblClick 是 false（并且 downItem.responds 测试将失败，因为嗯）：

callEvent(this, dblClick && downItem.responds('doubleclick')
    ? 'doubleclick' : 'click', event, downPoint, item);

PaperJS onDoubleClick 不适用于组？

PaperJS onDoubleClick doesn't work on groups?

javascript

canvas

paperjs