Propagation is not stopped for dynamically added items

[legomushroom]

Hi, I'm working on react app (in fact preact but doesn't matter so much) and I add points inside of some plane(<div />). Points and the plane can be dragged independently with mouse pointer. So I have to stopPropagation on a point to prevent pan event propagate up to the plane and prevent it to be shifted too. So if I add a new point dynamically - stopPropagation doesn't work on newly added point. After refresh page - it works just fine.

I would happy to make live example, please just let me know if you still maintain this repo and I'll provide you reproduced issue.

[legomushroom]

I found out that this line is the culprit:

/**
* Emit to the event listeners
* @param {string} eventType
* @param {Event} event
*/
wrapper.emit = function(eventType, event) {
  _firstTarget = event.target; // <------------------------------------- this one
  hammer.emit(eventType, event);
};

So you have this _firstTarget global and redefining it to event.target on each emit. Is there any reason for that? If I comment it - my issue gets solved, but I feel like it can break something?

Thanks in advance!

[josdejong]

Yes there was a very good reason for this _firstTarget, it ensures you keep the correct event target while dragging outside of the target where a drag started. Else you will not receive a drag end event for example when you stop dragging outside of the element where you started dragging. See this part of the code: https://github.com/josdejong/propagating-hammerjs/blob/master/propagating.js#L212-L226

Your issue with dynamically changed DOM is a generic one in react/preact, I've encountered it myself too. It's not specific to propagating-hammerjs. You can probably use event.stopPropagation() to prevent this, or maybe use a setTimeout(() => {...}, 0).

EDIT: I see now that you already tried event.stopPropagation. Maybe we can improve/fix stopPropagation to correctly deal with changed DOM.