Как заставить остановить touchmove в javascript?

Question

Вот что я создал.

var foo = document.getElementsByTagName('footer')[0], 
    startX = 0, 
    startY = 0, 
    finalX = 0, 
    finalY = 0; 

function handleTouchStart(e){ 
    var touch = e.touches[0] || e.changedTouches[0]; 

    startX = touch.pageX; 
    startY = touch.pageY; 
} 

function handleTouchMove(e){ 
    var touch = e.touches[0] || e.changedTouches[0], 
     touchX = startX - touch.pageX; 

    finalX += (touchX/6); 

    foo.style.marginLeft = finalX + 'px'; 

    if(Math.abs(touchX) >= 50){ 
     e.preventDefault(); // not working 
     // stop touchmove if possible (So, touchend will be triggered) 
     // animate in touchend 
    } 
} 

function handleTouchEnd(e){ 
    var touch = e.touches[0] || e.changedTouches[0], 
     getTouch = startX - touch.pageX; 

    if(getTouch < 0){ 
     console.log('Swiping right: ' + getTouch); 
    } else { 
     console.log('Swiping left: ' + getTouch); 
    } 
} 

foo.addEventListener('touchstart', handleTouchStart, false); 
foo.addEventListener('touchend', handleTouchEnd, false); 
foo.addEventListener('touchmove', handleTouchMove, false); 

В принципе, я просто хочу остановить сенсорную кнопку, чтобы я мог анимировать элемент. Я искал свою проблему, но к несчастью, у меня нет никаких решений.

Примечание: Я не использовал jQuery, потому что я создаю приложения на основе производительности.

Любые советы/помощь будут оценены. Благодаря!

Answer 1

Вы не можете заставить событие touchEnd - это поведение браузера по умолчанию. Тем не менее, вы можете обойти это в вашем коде, проверяя смещение touchX первого и принимать соответствующие меры, если он превышает порог:

function handleTouchMove(e){ 
    var touch = e.touches[0] || e.changedTouches[0], 
     touchX = startX - touch.pageX; 

    if(Math.abs(touchX) >= 50){ 
     e.preventDefault(); 
     console.log('breaking'); 
     handleTouchEnd(e); 
     return; 
    } 

    ... 

https://jsfiddle.net/mL76a9pe/1/