Can't cleanly pass touch/click events to panzoom children

Describe the bug

On latest devices, e.g. desktop Chrome or iOS Safari on iPhone X, click events to the panzoom element are still passed down to children, and we can add “isZooming” detection code using the panzoom events to determine if we want to handle the click events or not, and everything’s great.

Unfortuantely, in older devices, e.g. iPhone SE iOS v12.4 on Safari, I’m seeing the click events are eaten by event.preventDefault(). This can be avoided using the excludeClass, however we have so many clickable children that it breaks the pinch/zoom behavior more often than not.

I’m not quite sure what pattern to use when handling many clickable children, or if there’s a different library that makes more sense for our use-case.

Your environment

• Version of panzoom 4.1.x
• Browser and browser version Various

Expected behavior

Pinching to zoom doesn’t click child elements and doesn’t behave differently if child elements are under part of the gesture.

Clicking on child elements should trigger their click events.

Actual behavior

Pinching to zoom behaves erratically with excludeChildren on since there are so many clickable elements.

Child elements are unfortunately only clickable with this enabled on older devices.

[timmywil]

Thanks for opening an issue. I don’t think it’s possible to pass the events back down to children in any clean way. The event has already propagated from the children as events bubble up by nature. However, your first instinct of binding to the same event as panzoom is probably the right way to go. But instead of copying that block, I could expose that events variable and then you can use event.stopImmediatePropagation.

[timmywil]

🎉 This issue has been resolved in version 4.2.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀