Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Optional call stopPropagation() in handleDown

See original GitHub issue

Subject of the issue

I have a fullscreen carousel with panzoom inside slides. And I cannot handle swipe while panzoom force call event.preventDefault().

For now, while I’m using the version from the master branch I added this code to the handleDown() method:

if (!options.onTouch || typeof options.onTouch !== 'function') {
  event.preventDefault();
  event.stopPropagation();
} else {
  options.onTouch(event, { x: x, y: y, scale: scale });
}

And in the function passed with onTouch option, I make decision about calling stopPropagation based on panzoom state (don’t call if scale <= 1).

Your environment

panzoom 4.0.0-pre
iOS 12 Safari, Android Chrome 77

Expected behaviour

Option to manage event.stopPropagation() calling.

Example in another panzoom library https://github.com/anvaka/panzoom#handling-touch-events

Example of behavior I want to achieve: https://m.lamoda.ru/p/mp002xc001fb/clothes-supermamket-konvert/ (open it in a mobile browser and click on the product image).

I hope my explanation is clear 🙏

Issue Analytics

State:
Created 4 years ago
Comments:5 (4 by maintainers)

Top GitHub Comments

1reaction

timmywilcommented, Nov 5, 2019

You’re right. A callback is more flexible. I was a little more specific with the naming and purpose of this callback as we already have the panzoomstart event. https://github.com/timmywil/panzoom/pull/416

0reactions

timmywilcommented, Dec 16, 2019

🎉 This issue has been resolved in version 4.0.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Top Results From Across the Web

Event.stopPropagation() - Web APIs | MDN

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Stop propagation of all events - Stack Overflow

If you has Select Option: When you click on select tag, onChange and onClick event is fired. I solved this by creating a...

@panzoom/panzoom - npm Package Health Analysis | Snyk

Set this option to override that behavior. // Only call preventDefault() Panzoom(elem, { handleStartEvent: (event) => { event.preventDefault() } }) // Do ...

How to use addEventListener function in HTMLDivElement

stopPropagation (); event. ... preventDefault(); var target = event.target; if(target. ... _options.has(option)) { return; } const optionEl = document.

How to Stop Propagation of an Event in JS - JavaScript Tutorial

To prevent the click event from propagating to <div> element, you call the stopPropagation() method in the event handler of the button:.