当用户移动手指以滑动元素时如何防止触发“触摸”事件

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

You basically have two events when it comes to tapping the screen: touchstart and touchend . When a user touches the screen, the first event is captured, when he stops touching the screen, the second event is fired. The touchmove event should be captured to analyse the movement of the finger.

I'm not entirely sure what you're trying to say, but I'm assuming you you are capturing those events. What you can do is:

1. Instead of doing something on touchstart do it on touchend . This is more natural anyway, since something should happen after you lift the finger
2. After touchstart see if there is any movement using touchmove . If none and touchend is called, do what you wanted to do for a tap. If there was movement, do whatever you wanted to do for sliding.

I hope this helps.

Answer 2

I've made a workaround on this once.

You been already explained what are the events that are happening, and also you have a clue as a question.

For example lets say you have your gallery on a #galleryOverlay, and you scroller is inside it.

Then all you have to do is something like

$('#galleryOverlay').bind('touchstart touchmove touchmove', function(e){e.stopPropagation();})

So this way you keep your events inside your gallery, but you prevent them to happen outside.

Good luck

Answer 3

This library adds a 'tap' event which you can use to watch for a "tap" instead of "touchend".

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