如何在JavaScript中强制停止touchmove？

debugcn 发表于 Dev

lun

这就是我创造的。

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);

基本上，我只想停止touchmove，以便可以为元素设置动画。我会搜索我的问题，但不幸的是，我没有任何解决方案。

注意：我没有使用jQuery，因为我正在创建基于性能的应用程序。

任何建议/帮助将不胜感激。谢谢！

韦斯

您不能强制touchEnd事件-这是默认的浏览器行为。但是，您可以通过检查touchXfirst的偏移量并在超出阈值的情况下采取适当的措施来解决此问题：

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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。