Touch событие на айфонах

Question

Проще говоря не работает перелистывание слайдера только на айфонах я так понял сафари не очень дружит с событиями тач https://cellsium.github.io/waxom Вот то что я наваял и проблема в последнем слайдере(нижнем) не могу понять как подружить сафари и тач события js.

    let touch = 0;
    let up = 0;

    let touchD = 0;
    let touchU = 0;

    function clickDown(e) {
        touch = e.clientX;
    }

    function clickUp(e) {
        up = e.clientX;
        if (up < touch) {
            leftSlide();
        } else {
            rightSlide();
        }
    }

    function touchDown(e) {
        touchD = e.changedTouches[e.changedTouches.length - 1].pageX;
    }

    function touchUp(e) {
        touchU = e.changedTouches[e.changedTouches.length - 1].pageX;
        if (touchU < touchD) {
            leftSlide();
        } else {
            rightSlide();
        }
    }

    line.addEventListener('mousedown', clickDown);
    line.addEventListener('touchstart', touchDown);
    line.addEventListener('mouseup', clickUp);
    line.addEventListener('touchend', touchUp);

Answer 1

Я добавил с компа, протестировал на мобильном, свайпы работают. Для отслеживания свайпа конечно нужно отслеживать и событие touchstart и событие touchend. Так что, я был не прав в комменте. Но координаты перемещения пальца доступны только из события touchmove. Для плавного перемещения картинки нужен только touchmove.

var swipeFunc = {
    touches : {
        "touchstart": {"x":-1, "y":-1}, 
        "touchmove" : {"x":-1, "y":-1}, 
        "touchend"  : false,
        "direction" : "undetermined"
    },
    touchHandler: function(event) {
        var touch;
        if (typeof event !== 'undefined'){  
            event.preventDefault(); 
            if (typeof event.touches !== 'undefined') {
                touch = event.touches[0];
                switch (event.type) {
                    case 'touchstart':
                    case 'touchmove':
                        swipeFunc.touches[event.type].x = touch.pageX;
                        swipeFunc.touches[event.type].y = touch.pageY;
                        break;
                    case 'touchend':
                        swipeFunc.touches[event.type] = true;
                        if (swipeFunc.touches.touchstart.x > -1 && swipeFunc.touches.touchmove.x > -1) {
                            swipeFunc.touches.direction = swipeFunc.touches.touchstart.x < swipeFunc.touches.touchmove.x ? "right" : "left";
                            
                            // DO STUFF HERE
                            alert(swipeFunc.touches.direction);
                        }
                    default:
                        break;
                }
            }
        }
    },
    init: function() {
        document.addEventListener('touchstart', swipeFunc.touchHandler, false); 
        document.addEventListener('touchmove', swipeFunc.touchHandler, false);  
        document.addEventListener('touchend', swipeFunc.touchHandler, false);
    }
};
swipeFunc.init();

Про то, что писал в комментариях, можно реализовать на чистом CSS. Песочница почему-то режет CSS. Добавил сюда: https://jsfiddle.net/56t7dr8g/

БЛОГ НА HUSL

Touch событие на айфонах

Ответы (1 шт):