0

我有下面的代码，它允许我滑动一个元素，元素会移动，露出下面的元素。我希望能够滑动一次，让函数运行，让 div 重置它的位置，然后让我再次滑动。基本上，在功能运行时禁用滑动，然后在功能结束后启用它。

这是我的代码：

var threshold = {
    x: 30,
    y: 10
}
var originalCoord = {
    x: 0,
    y: 0
}
var finalCoord = {
    x: 0,
    y: 0
}

    function touchMove(event) {
        finalCoord.x = event.targetTouches[0].pageX
        changeX = originalCoord.x - finalCoord.x
        var changeY = originalCoord.y - finalCoord.y
        if (changeY < threshold.y && changeY > (threshold.y * -1)) {
            changeX = originalCoord.x - finalCoord.x
            if (changeX > threshold.x) {
                // My function which runs when you swipe left
            }
        }
    }

    function touchEnd(event) {
    }

    function touchStart(event) {
        originalCoord.x = event.targetTouches[0].pageX
        finalCoord.x = originalCoord.x
    }

window.addEventListener("touchstart", touchStart, false);
window.addEventListener("touchmove", touchMove, false);
window.addEventListener("touchend", touchEnd, false);

我想我可以在功能运行后使用event.preventDefault()或return false禁用拖动，但它最终仍然允许我在此期间拖动。

4

2 回答 2

1

很难弄清楚你想要什么，但要禁用刷卡只需添加辅助变量：

var _swipeDisabled = false;

然后在 touchmove 中检查滑动是否被禁用，如果是这样return false：

function touchMove(event) {
    if (_swipeDisabled) return false; // this line is crucial
    finalCoord.x = event.targetTouches[0].pageX
    changeX = originalCoord.x - finalCoord.x
    var changeY = originalCoord.y - finalCoord.y
    if (changeY < threshold.y && changeY > (threshold.y * -1)) {
        changeX = originalCoord.x - finalCoord.x
        if (changeX > threshold.x) {
            _swipeDisabled = true; // add this before calling your function
            // My function which runs when you swipe left
        }
    }
}

在您的功能中，您必须再次启用滑动，所以只需执行以下操作：

_swipeDisabled = false;

在你在那里调用的函数中。最简单的解决方案通常是最好的，记住！

于 2012-10-17T18:01:37.373 回答
0

我能够通过删除然后重新添加来解决这个问题EventListener：

if (changeX > threshold.x) {
    window.removeEventListener('touchmove', touchMove, false);
    // Function
    setTimeout(function () {
        window.addEventListener('touchmove', touchMove, false);
    }, 800)
}
于 2012-10-17T18:11:20.350 回答