当拖动 child 并且 child 和 parent 都可拖动时，有没有办法阻止 parent Konva.Group 中的 'dragend' 事件？

Question

我有一个可以拖动的 Konva.Group。在这个组中，我添加了另一个 Konva.Group，它还有另一个可拖动的 Konva.Group。所以关系是这样的：

parent组 -> child组 -> child组

现在，当我尝试拖动最后一个可拖动对象 child 时，我还在 parent 中获得了 'dragend' 事件，尽管 parent 保持在同一位置。

所以我只得到这个 parent 'dragend' 事件。 child 的拖动正常，只是 parent 事件似乎不对。

目前我找到的解决方法如下所示：

let _this = this;
this.on('dragmove', (evt) => {
  if(evt.target._id == _this._id){
  //my handler code
  }
}

但这实际上是错误还是预期行为，我只需要以某种方式阻止事件传播？

Answer 1

这不是错误。这是事件冒泡（事件传播）的预期行为。它适用于所有拖动事件。

有两种方法可以解决这个问题。

(1) 取消事件气泡

https://konvajs.org/docs/events/Cancel_Propagation.html

childGroup.on('dragend', (e) => {
  evt.cancelBubble = true;
});

(2) 在事件中过滤

这就是您在解决方法中所做的。 e.target 指向一个被拖动的节点。所以你可以用它来检查事件回调的逻辑。

parentGroup.on('dragend', (e) => {
  // do nothing if any child was dragged
  if (e.target !== parentGroup) {
    return;
  }
  // do some logic here
});

当拖动 child 并且 child 和 parent 都可拖动时，有没有办法阻止 parent Konva.Group 中的 'dragend' 事件？

Is there a way to prevent 'dragend' event in parent Konva.Group when a child is dragged and both child and parent are draggable?

konvajs

(1) 取消事件气泡

(2) 在事件中过滤