Javascript support for touch without blocking browsers pinch support

Question

I have a little web gallery that I added swipe navigation to for mobile browsers. I did it with pretty simple touchstart/touchmove/touchend event tracking.

The problem is that when I try to pinch zoom in the browser window it fails if any finger starts in the element I added the touch event handlers to, I'm guessing from the calls to preventDefault.

Is there a way I can track the touch events for navigating my images without blocking the zoom in and out feature of the browser? I don't mind blocking single finger scrolling if it's over my element, but I want to allow the pinch zooming.

Here's the code:

  function addDragHandlers(eventDivId) {
    var startX, endX;
    var slides = $('#'+eventDivId);

    slides.bind('touchstart', function(e) {
        e.preventDefault();
        startX = e.pageX;
        endX = startX;
    });

    slides.bind('touchmove', function(e) {
        e.preventDefault();
        endX = e.pageX;
    });

    slides.bind('touchend', function(e) {
            e.preventDefault();
            if ( endX - startX < 0) {
                // go to next image
            } else if ( endX - startX > 0) {
                // go to previous image
            } else {
                // do click action
            }
        }
    });
 }

Answer 1

What you want is ongesturestart, ongesturestart move and end work the same as on touch but for more than one finger. From their you can add a listener for:

event.stopPropagation();

to prevent "preventDefault()" from propagating in.

Answer 2

I wanted this to work on Android so I didn't want to use gesture events, which I have read are only on iOS - though I have no android to test that claim.

I then looked at a bunch of javascript gesture libraries which try to make gesture support easy. Unfortunately none of them worked well enough for my purposes.

So I ended up using touch handlers on the body to track all the touches on the page and then a custom heuristic to determine whether to use the touch to navigate the gallery or to use it to scroll/pinch the page.

It's still not perfect. If you start by touching my gallery element and then touching outside it the pinch doesn't work.

As an aside, the "TouchSwipe" jquery library has an incredibly well-designed and flexible API, but with the configuration I needed, tracking only horizontal swipes on my element, it was too quirky under iOS6 and hasn't been updated for a few weeks. If you are looking into this sort of challenge and it's a few months from now I'd recommend checking the updates for that plugin.