第一次刷卡後禁用刷卡，然後重置一次？

我有下面的代碼，它允許我滑動一個元素，元素將移動，顯示下面的元素。我希望能夠輕掃一次，讓功能運行，讓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禁用拖動一旦函數運行，但它最終還是讓我把它拖動期間。

來源

2012-10-17 Charlie

我能夠通過刪除然後在EventListener加回解決這個問題：

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

來源

2012-10-17 18:11:20 Charlie

漂亮很難搞清楚你想要什麼，但禁用刷卡只需添加輔助變量：

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-17 18:01:37 Killah

我以爲我清楚我試圖做的，什麼是很難理解？ – Charlie

@Charlie關於重置div的部分 - 我認爲你也希望我們編寫代碼來重置div的位置。在閱讀描述中的代碼之前的最後一句之後，一切都很清楚。 – Killah

@Charlie也許你應該接受答案？ – Killah

第一次刷卡後禁用刷卡，然後重置一次？

回答

相關問題