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 に答える