обработка пролистывания в сенсорных устройствах

Question

У меня есть этот горизонтальный компонент карусели, который я хочу, чтобы он работал для событий Mouse и Swipe.Все работает нормально, за исключением одного бита: на сенсорных устройствах я не хочу, чтобы карусель прокручивалась горизонтально, если пользователь пытается провести пальцем по вертикали, чтобы прокрутить всю страницу.

То, что я делаю, это,

• при mousedown / touchstart - я прекращаю распространение события, чтобы избежать прокрутки страницы, выбора элементов и т. Д. *
• при первом событии перемещения на карусели, яустановите тайм-аут 50 мс, чтобы определить, движется ли пользователь вертикально или горизонтально.
• Если deltaX
• в моем обработчике mousedown / touchstart, я читаю это "вручную"flag и, если это правда, я возвращаю true из своей функции, поэтому все события браузера по умолчанию, такие как вертикальная прокрутка страницы, продолжают работать.

Это не работает, все, что я делаюотвечает правильно, но браузер не берет и не прокручивает страницу.Надеюсь, я достаточно правильно объясняю себя, чтобы вы, ребята, могли мне помочь ... У меня нет примера в Интернете, потому что это "секретный" проект для моей компании ...

Спасибо

Answer 1

Я пытался сделать то же самое, что и вы (были?). Ключ должен проверить touchmove, является ли текущее касание и последнее касание более вертикальным, чем горизонтальным. Если касание было больше слева направо или справа налево, запретите событие по умолчанию, в противном случае игнорируйте его. Вот что я в итоге написал. Надеюсь, это работает для вас!

var gestures = function() {
    var self = this,
    coords = {
        startX: null,
        startY: null,
        endX: null,
        endY: null
    };

    self.$el.on('touchstart', function(e) {
        coords.startX = e.originalEvent.targetTouches[0].clientX;
        coords.startY = e.originalEvent.targetTouches[0].clientY;
        coords.endX = coords.startX;
        coords.endY = coords.startY;
    });

    self.$el.on('touchmove', function(e) {
        var newX = e.originalEvent.targetTouches[0].clientX,
            newY = e.originalEvent.targetTouches[0].clientY,
            absX = Math.abs(coords.endX - newX),
            absY = Math.abs(coords.endY - newY);

        // If we've moved more Y than X, we're scrolling vertically
        if (absX < absY) {
            return;
        }

        // Prevents the page from scrolling left/right
        e.preventDefault();

        coords.endX = newX;
        coords.endY = newY;
    });

    self.$el.on('touchend', function(e) {
        var swipe = {},
            deltaX = coords.startX - coords.endX,
            deltaY = coords.startY - coords.endY,
            absX = Math.abs(deltaX),
            absY = Math.abs(deltaY);

        swipe.distance = (absX > absY) ? absX : absY;
        swipe.direction = (absX < absY) ?
            (deltaY < 0 ? 'down' : 'up') :
            (deltaX < 0 ? 'right' : 'left');

        // console.log(swipe.direction + ' ' + swipe.distance + 'px');

        // If we have a swipe of > 50px, let's use it!
        if (swipe.distance > 50) {
            if (swipe.direction === 'left') {
                self.advance();
            } else if (swipe.direction === 'right') {
                self.retreat();
            }
        }

    });
};

this - это мой объект-слайдер, а $el - это элемент контейнера.