Question

I have the following code which allows me to swipe an element, and the element will move, revealing the element underneath. I’d like to be able to swipe once, have the function run, have the div reset it’s position, and allow me to swipe once again. Basically, disable the swiping while the function is running, then enable it once the function is over.

Here’s my code:

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

I figured I could use event.preventDefault() or return false to disable dragging once the function runs, but it still ends up allowing me to drag during it.

Answer 1

I was able to solve this by removing then adding back in the EventListener:

if (changeX > threshold.x) {
    window.removeEventListener('touchmove', touchMove, false);
    // Function
    setTimeout(function () {
        window.addEventListener('touchmove', touchMove, false);
    }, 800)
}