0

Проще говоря не работает перелистывание слайдера только на айфонах я так понял сафари не очень дружит с событиями тач 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);
10
  • Сюда требуется добавить минимальный код, воспроизводящий проблему. Это делается для других людей со схожим вопросом. Чтобы они не искали какие там слайдеры были в декабрьской версии вашего шаблона сайта.
    – DiD
    18 дек 2020 в 6:46
  • Посмотрел ваш код. Вам для отслеживания движения не нужны были touchstart и touchend, а нужен только touchmove. Вот он то как раз и отсутствует в вашем коде.
    – DiD
    18 дек 2020 в 6:47
  • при нажатии(касании) записывается начальное положение мыши(пальца) при отпускании вычисляется движение исходя из начальной позиции пальца или мышы (влево или в право). не могу догнать как тачмувом определить направление движения пальца (влево или вправо) 18 дек 2020 в 6:52
  • На ифонах так не делается, на ифоне ты чувствуешь объект, который перемещаешь. Объект под пальцем ходит плавно, как будто мацая силиконовую грудь.
    – DiD
    18 дек 2020 в 6:55
  • движение слайдера в реальном времени не предполагалось 18 дек 2020 в 6:56

1 ответ 1

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/

1
  • preventdefault решает! код хорош,спасибо DID 18 дек 2020 в 7:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.