Как предотвратить срабатывание события «касание», когда пользователь перемещает палец, чтобы сдвинуть элемент

Question

Решение : https://github.com/alexgibson/tap.js

У меня возник конфликт между событиями «прикосновения» и «прикосновения» на iPad в мобильном Safari.У меня есть изображения, расположенные рядом друг с другом, например, галерея, и к ним прилагается событие '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.Если ничего и touchend не вызывается, сделайте то, что вы хотели сделать, для касания.Если было движение, делайте все, что вы хотели сделать для скольжения.

Надеюсь, это поможет.

Answer 2

В эту библиотеку добавляется событие «тап», которое можно использовать для отслеживания «касания» вместо «касания».

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

Answer 3

Я однажды обошел эту проблему.

Вам уже объяснили, какие события происходят, а также у вас есть вопрос в качестве вопроса.

Например, допустим, у вас есть галерея на #galleryOverlay, а внутри нее скроллер.

Тогда все, что вам нужно сделать, это что-то вроде

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

Таким образом, вы сохраняете свои события внутри своей галереи, но предотвращаете их проведение снаружи.

Удачи