确定touchmove的垂直方向

时间:2012-11-07 20:57:35

标签: jquery ipad touch

我正在尝试为平板电脑实施触控侦听器,以触发某些操作,具体取决于它是向上还是向下移动。

我尝试了本机监听器:

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

但我不知道如何确定方向。

这可能吗?

或者我是否需要使用touchstart / touchend,如果我需要,我可以在触摸移动停止前确定方向吗?

如果我只能使用外部库,那么最好的是什么?

感谢。

5 个答案:

答案 0 :(得分:49)

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

答案 1 :(得分:35)

您需要保存触摸的最后位置,然后将其与当前位置进行比较 粗略的例子:

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

答案 2 :(得分:14)

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'

'touchmove'事件

答案 3 :(得分:3)

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

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

答案 4 :(得分:2)

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

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