Не срабатывает событие 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)
})