Не срабатывает событие touchmove, до того момента пока не будет произведен клик touchstart и палец не будет убран

при написании скрипта свайпа элемента возникает проблема. Чтобы touchmove сработал, сначала необходимо кликнуть и убрать палец с элемента, только после чего начнет работать touch move. В чем может быть моя ошибка?

document.querySelector('.cap__square').addEventListener('touchstart', (e) => {
        console.log('start');
        e.preventDefault();
        const endTouch = (e) => {
            e.preventDefault();
            e.target.removeEventListener('touchmove', moveTouch)
            e.target.removeEventListener('touchend', endTouch)
            }
        const moveTouch = (event) => {
            event.preventDefault();
            console.log('move')
            console.log(event.touches[0].pageX);
            document.querySelector('.cap__arrow').style.cssText = "display: block";
            document.querySelector('.cap__check').style.cssText = "display: none";
            document.querySelector('.cap__no').style.cssText = "display: none";
            let slideBlock = document.querySelector('.cap__block');
            // console.log(e.targetTouches[0].clientX)
            let pageX = event.changedTouches[0].clientX - block.getBoundingClientRect().left - square.clientWidth;
            let pageXRight = event.changedTouches[0].clientX - block.getBoundingClientRect().left - 2;
            let squarePos = pageX - block.getBoundingClientRect().left - square.clientWidth / 2;
            if (pageX > -1 && pageXRight < slideBlock.clientWidth) {
                pazl.style.left = pageX + 'px';
                square.style.left = pageX + 'px';
                square.style.top = unplashImgHeight + 11 +'px';
            } else {
                // square.addEventListener('touchend') = function() {
                //     document.removeEventListener('touchmove', onMouseMove);
                //     square.onmouseup = null;
                // };
            }
            if (squarePos > 5) {
                document.querySelector('.cap__text').style.cssText = "opacity: 0"
            } else {
                document.querySelector('.cap__text').style.cssText = "opacity: 1"
            }
            square.style.background = "#707ad6";

            }

        e.target.addEventListener('touchmove', moveTouch)
        e.target.addEventListener('touchend', endTouch)
    })


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