确定touchmove的垂直方向

我正在尝试为平板电脑实现一个触摸监听器，以触发某些操作，具体取决于它是向上还是向下移动。

我尝试了本机监听器：

($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

Aureliano的回答似乎非常准确，但不知怎的，它对我不起作用，所以给他学分我决定用以下方法改进他的答案：

 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'的'touchend'事件

Answer 4

我创建了一个脚本，可以确保文档中的元素滚动而不滚动任何其他内容，包括正文。 这适用于浏览器以及移动设备/平板电脑。

 // 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(); }); 

Answer 5

该解决方案考虑了当前答案没有的方向变化。 以下解决方案还兼顾触摸灵敏度; 这当用户在一个方向上移动但在触摸端时，用户手指在不同方向上轻推，弄乱实际方向。

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