Question

Solution: https://github.com/alexgibson/tap.js

I have a conflict between ‘touchend’ and ‘touchmove’ events on the iPad in mobile Safari. I have images sitting next to each other like a gallery and they have a ‘touchend’ event attached to flip when touchend. However, you can also slide from one image to the other (like on iPhone sliding home screen to the next screen).

Now I can’t figure out how to prevent the ‘touchend’ event from firing when I want to slide to the next image. Obviously, I don’t want the image to flip if I slide, only if I tap.

My solution so far:

var img = $('.show-video');

var sliding = false;

img.bind('touchend', function(e) {
    if (sliding === false){
        Animate($(this), 'flip');
    }
});

img.bind('touchmove', function(){
    sliding = true;
    $(this).bind('touchend', function(){
        window.setTimeout(function(){
            sliding = false;
        }, 200)
    })
});

““

I think this can be done much better.

Answer 1

This library adds a ‘tap’ event which you can use to watch for a “tap” instead of “touchend”.

https://github.com/alexgibson/tap.js