Question

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

我在移动版Safari中的iPad上的'touchend'和'touchmove'事件之间存在冲突。我有一个图像彼此相邻，就像一个画廊，他们有一个'touchend'事件附加到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事件以分析手指的移动。

我不完全确定你要说的是什么，但我假设你正在捕捉这些事件。你能做的是：

而不是在touchstart上执行某些操作，而是在touchend上执行此操作。无论如何，这更自然，因为举起手指后会发生一些事情
在touchstart之后，使用touchmove查看是否有任何移动。如果没有并且touchend被调用，请执行您想要点击的操作。如果有运动，做任何你想做的滑动。

我希望这会有所帮助。

Answer 2

我已经对此做了一次解决方法。

您已经解释了正在发生的事件，您也有一个线索作为问题。

例如，假设您在#galleryOverlay上有自己的图库，并且滚动条位于其中。

然后你所要做的就像是

$（'＃galleryOverlay'）。bind（'touchstart touchmove touchmove'，function（e）{e.stopPropagation（）;}）

因此，您可以将自己的活动保留在图库中，但这样可以防止它们发生在外面。

祝你好运

Answer 3

此库添加了一个“点按”事件，您可以使用该事件来观看“点按”而不是“touchend”。

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

如何预防＆＃39;触及＆＃39;用户移动手指滑动元素时触发的事件

3 个答案: