確定touchmove的垂直方向

Question

我試圖實現平板電腦的觸摸監聽器來觸發某些操作，具體取決於它是否向上或向下移動。

我試圖本地聽衆：

($document).bind('touchmove', function (e) 
{ 
    alert("it worked but i don't know the direction"); 
}); 

但我不知道如何確定的方向。

這可能嗎？

或者我需要使用touchstart/touchend，如果我需要這個，我可以在觸摸移動停止之前確定方向嗎？

如果我只能用外部庫來做這件事，最好的是什麼？

謝謝。

Answer 1

您需要保存觸摸的最後位置，然後將其與當前位置進行比較。
粗糙例如：

var lastY; 
$(document).bind('touchmove', function (e){ 
    var currentY = e.originalEvent.touches[0].clientY; 
    if(currentY > lastY){ 
     // moved down 
    }else if(currentY < lastY){ 
     // moved up 
    } 
    lastY = currentY; 
}); 

Answer 2

我遇到了一些問題，在iPad和兩個事件

解決它

var ts; 
$(document).bind('touchstart', function (e){ 
    ts = e.originalEvent.touches[0].clientY; 
}); 

$(document).bind('touchend', function (e){ 
    var te = e.originalEvent.changedTouches[0].clientY; 
    if(ts > te+5){ 
     slide_down(); 
    }else if(ts < te-5){ 
     slide_up(); 
    } 
}); 

Answer 3

奧雷利亞諾的答案似乎是真正準確的，但不知何故，它並沒有爲我工作，所以給他我決定改善他與下列答案學分：

var ts; 
$(document).bind('touchstart', function(e) { 
    ts = e.originalEvent.touches[0].clientY; 
}); 

$(document).bind('touchmove', function(e) { 
    var te = e.originalEvent.changedTouches[0].clientY; 
    if (ts > te) { 
     console.log('down'); 
    } else { 
     console.log('up'); 
    } 
}); 

我只是改變了'touchend'事件'touchmove'

Answer 4

該解決方案考慮到當前答案沒有的方向變化。下面的解決方案還考慮了觸摸靈敏度;當用戶在一個方向上移動但觸摸結束時，用戶的手指在不同的方向上移動，從而搞亂了實際的方向。

var y = 0; //current y pos 
var sy = y; //previous y pos 
var error = 5; //touch sensitivity, I found between 4 and 7 to be good values. 

function move(e) { 
    //get current y pos 
    y = e.pageY; 

    //ingnore user jitter 
    if (Math.abs(y - sy) > error) { 
     //find direction of y 
     if (y > sy) { 
      //move down 
     } else { 
      //move up 
     } 
     //store current y pos 
     sy = y; 
    } 
} 

Answer 5

我創建了一個腳本，將確保元素中的文件將不滾動其他任何東西，包括身體滾動。這適用於瀏覽器以及移動設備/平板電腦。

// desktop scroll 
$('.scrollable').bind('mousewheel DOMMouseScroll', function (e) { 
    var e0 = e.originalEvent, 
    delta = e0.wheelDelta || -e0.detail; 

    this.scrollTop += delta * -1; 
    e.preventDefault(); 
}); 

var lastY; 
var currentY; 

// reset touch position on touchstart 
$('.scrollable').bind('touchstart', function (e){ 
    var currentY = e.originalEvent.touches[0].clientY; 
    lastY = currentY; 
    e.preventDefault(); 
}); 

// get movement and scroll the same way 
$('.scrollable').bind('touchmove', function (e){ 
    var currentY = e.originalEvent.touches[0].clientY; 
    delta = currentY - lastY; 

    this.scrollTop += delta * -1; 
    lastY = currentY; 
    e.preventDefault(); 
});