PaperJS onDoubleClick不适合小组工作吗？

Question

看看这幅素描。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代码，那么您将发现子元素(在本例中是path元素)将气泡事件到group元素。子元素确定鼠标向上动作是以单击事件形式出现还是以doubleclick事件形式出现。在当前的PaperJS代码中，子元素只有在子元素本身有onDoubleClick事件处理程序时才会出现doubleclick事件。由于PaperJS中存在此问题，当您期待doubleclick事件时，您的组元素将引发单击事件。在PaperJS中修复该问题之前，可以通过将空的onDoubleClick事件处理程序附加到子元素来解决该问题。例如..。

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

Answer 2

问题是，纸质is没有检查父链上的onDoubleClick事件(或者根据实现选择的不同，论文没有将onDoubleClick事件向下传播到组中)。

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

1. 在组上设置mousedown和mouseup处理程序，并实现自己的双击逻辑。(有点像素描)。
2. 在每个圆上设置doubleclick事件。

我通常做第一个，因为它让我的能见度和控制力。

如果您想查看纸质to代码，则逻辑从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);