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

Question

I have a Konva.Group which is draggable. Within this group I add another Konva.Group which has yet another draggable Konva.Group. So the relationship is like this:

parent group -> child group -> child group

Now when I try to drag my last draggable child I also get 'dragend' event in the parent, although the parent stays at the same position.

So I only get this parent 'dragend' event. The dragging of the child works correctly, it's just the parent event that seems not right.

The workaround that I found so far looks like this:

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

But is it a bug actually or expected behavior and I just need to somehow prevent event propagation?

score 2 · Accepted Answer · answered Dec 27 '21 at 15:44

This is not a bug. That is expected behavior of event bubbling (event propagation). It works for all drag events.

There are two ways to resolve the issue.

(1) Cancel Event Bubble

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

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

(2) Filter in event

That is what you did in your workaround. e.target points to a node that was dragged. So you can use it to check the logic of event callback.

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

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

1 Answers1

(1) Cancel Event Bubble

(2) Filter in event