panzoom onTouch to have behavior like beforeMouseDown

Hi,

I am using beforeMouseDown bypass panzoom when dragging an element, I want to be able to have the same behavior in onTouch.

Currently:

function onMouseDown(e) {
  // if client does not want to handle this event - just ignore the call
  if (beforeMouseDown(e)) return;

Could something similar be done for onTouch?

function onTouch(e) {
    // let the override the touch behavior
    beforeTouch(e);

It is possible to have not just event propogation, but selective disabling of the gesture?

Thank you for the code, I'm forking something here to cover my use case :)

This seems related to: https://github.com/anvaka/panzoom/issues/12

The semantics of beforeMouseDown and beforeTouch are different, I can imagine that changing this could be breaking, otherwise I would create a pull request

May 14 '20 04:05 exrhizo

a huge +1

@exrhizo did you find a solution?

May 25 '23 08:05 BernhardBaumrock

Ha, I looked into the code and found a solution!

Simply add event listeners to the DOM element where you use PanZoom and trigger .pause() on your desired condition on touchstart and then .resume() PanZoom on touchend:

  let $page = document.getElementById("mp-sheet");

  $page.addEventListener("touchstart", (e) => {
    if (e.target.closest(".block")) PanZoom.pause();
  });
  $page.addEventListener("touchend", (e) => {
    PanZoom.resume();
  });

  PanZoom = panzoom($page, { ... });

May 25 '23 09:05 BernhardBaumrock

@BernhardBaumrock THANK YOU!!! I almost gave up on using this library because I couldn't figure out how to stop touch-based panning.