javascript - 如何防止用户移动手指滑动元素时触发 'touched' 事件

Question

解决方案:https://github.com/alexgibson/tap.js

我在移动版 Safari 中的 iPad 上发生“touchend”和“touchmove”事件之间的冲突。我有像画廊一样并排放置的图像，并且它们有一个“touchend”事件附加在触摸结束时翻转。但是，您也可以从一个图像滑动到另一个图像(就像在 iPhone 上滑动主屏幕到下一个屏幕)。

现在我不知道如何在我想滑动到下一张图片时阻止“touchend”事件触发。显然，我不希望图像在滑动时翻转，只有在我点击时才会翻转。

到目前为止我的解决方案:

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)
    })
});

````

我认为这可以做得更好。

Answer 1

点击屏幕时基本上有两个事件:touchstart 和 touchend。当用户触摸屏幕时，第一个事件被捕获，当他停止触摸屏幕时，第二个事件被触发。应捕获 touchmove 事件以分析手指的移动。

我不完全确定你想说什么，但我假设你正在捕捉那些事件。你可以做的是:

1. 不要在 touchstart 上做某事，而是在 touchend 上做。无论如何，这更自然，因为在您抬起手指后应该会发生一些事情
2. 在 touchstart 之后使用 touchmove 查看是否有任何移动。如果 none 和 touchend 被调用，做你想做的点击。如果有运动，请为滑动做任何您想做的事情。

希望对您有所帮助。