当拖动孩子并且孩子和父母都可以拖动时，有没有办法防止父母 Konva.Group 中的“拖动”事件？答案

【问题标题】：Is there a way to prevent 'dragend' event in parent Konva.Group when a child is dragged and both child and parent are draggable?当拖动孩子并且孩子和父母都可以拖动时，有没有办法防止父母 Konva.Group 中的“拖动”事件？
【发布时间】：2021-12-25 21:13:04
【问题描述】：

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

父组 -> 子组 -> 子组

现在，当我尝试拖动我最后一个可拖动的孩子时，我也会在父级中获得 'dragend' 事件，尽管父级保持在同一位置。

所以我只得到这个父“dragend”事件。子的拖动正常，只是父事件似乎不对。

到目前为止，我发现的解决方法如下：

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

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

【问题讨论】：

标签： konvajs

【解决方案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
});

【讨论】：