Событие touchstart на мобильном устройстве отрабатывает только один раз

Question

  let clientStartX;
  let offset;

  let touchstart = document.querySelector('.touchstart');
  let touchmove = document.querySelector('.touchmove');
  let touchend = document.querySelector('.touchend');
  
  container.get("track").addEventListener('touchstart', function(event) {
    //alert('touchstart: ', event.pageX, event.pageY);
    event.preventDefault();
    clientStartX = event.changedTouches[0].clientX;
    touchstart.innerHTML = '<p>touchstart: ' + clientStartX +'</p>';
  });

  container.get("track").addEventListener('touchmove', function(event) {
    event.preventDefault();
    let touch = event.changedTouches[0].clientX;
    offset = clientStartX - touch;
    touchmove.innerHTML = '<p>touchmove: ' + touch +'</p>';
  });

  container.get("track").addEventListener('touchend', function(event) {
    //alert('touchstart: ', event.pageX, event.pageY);
    event.preventDefault();

    touchend.innerHTML = '<p>touchmove: ' + offset +'</p>';
    if (offset > 0) {
      swipeNext();
    }
    else if (offset < 0) {
      swipePrev();
    }
  });

Данный код обрабатывает касания по моим слайдерам

container.get("track") // слайдер

Почему-то в инструментах разработчика при отладке на мобильном устройстве все работает как надо (см. скрин ниже), а вот на мобильном устройстве данная функция отрабатывает лишь один раз. Почему так происходит?

Answer 1

Я добавил эти события контейнеру слайдера block__wrapper и все заработало

            <div class="categories__wrapp slider__wrapper">
            <div class="category__container slider__container" data-toshow="4" data-toscroll="1" data-minwidth="350">
                <div class="text__title"><span>Категории </span>товаров</div>
                <div class="block__wrapper">
                    <div class="categories slider__track">
                        <div class="category__wrapp slider__item"><div class="category"><span>Роллы</span><img src="img/categories/rolli.png" alt=""></div></div>
                        <div class="category__wrapp slider__item"><div class="category"><span>Бургеры</span><img src="img/categories/burger.png" alt=""></div></div>
                        <div class="category__wrapp slider__item"><div class="category"><span>Хот-доги</span><img src="img/categories/hotdog.png" alt=""></div></div>
                        <div class="category__wrapp slider__item"><div class="category"><span>Салаты</span><img src="img/categories/salati.png" alt=""></div></div>
                        <div class="category__wrapp slider__item"><div class="category"><span>Закуски</span><img src="img/categories/zakuski.png" alt=""></div></div>
                        <div class="category__wrapp slider__item"><div class="category"><span>Напитки</span><img src="img/categories/coctails.png" alt=""></div></div>
                        <div class="category__wrapp slider__item"><div class="category"><span>Алкоголь</span><img src="img/categories/coctails.png" alt=""></div></div>
                    </div>
                    <div class="swipe__next"><img src="img/swipe__next.png" alt=""></div>
                    <div class="swipe__prev"><img src="img/swipe__next.png" alt=""></div>
                </div>
            </div>

        </div>

БЛОГ НА HUSL

Событие touchstart на мобильном устройстве отрабатывает только один раз

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