javascript – 如何通过jQuery Mobiles滑动事件获取方向和距离

前端之家收集整理的这篇文章主要介绍了javascript – 如何通过jQuery Mobiles滑动事件获取方向和距离前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
使用jQuery Mobiles滑动事件时,是否可以获得回调函数中的方向和距离?我在 official docs中一无所获.

TouchSwipe是一个很好的选择,但我需要jQuery Mobile的tap事件,我不想包含两个库.

解决方法

工作示例: http://jsfiddle.net/Gajotres/K69AJ/

这个例子是用jQuery Mobile事件制作的,所以它只适用于jQuery Mobile.在Windows和Android平台上测试.

Vmouse事件旨在弥合桌面和移动浏览器之间的差异.

还要注意这一行:

event.preventDefault();

Android平台需要它,平台有一个讨厌的触摸移动检测错误.错误报告:http://code.google.com/p/android/issues/detail?id=19827

var gnStartX = 0;
var gnStartY = 0;
var gnEndX = 0;
var gnEndY = 0;

$(document).on('vmousedown',function(event){
    gnStartX = event.pageX;
    gnStartY = event.pageY;
    event.preventDefault();
});

$(document).on('vmouseup',function(event){
    gnEndX = event.pageX;
    gnEndY = event.pageY;  
    var distance = Math.ceil(nthroot(Math.pow((gnEndX - gnStartX),2) + Math.pow((gnEndY - gnStartY),2),2));

    if(Math.abs(gnEndX - gnStartX) > Math.abs(gnEndY - gnStartY)) {
        if(gnEndX > gnStartX) {
            alert("Swipe Right - Distance " + distance + 'px');
        } else {
            alert("Swipe Left - Distance " + distance + 'px');     
        }
    } else {
        if(gnEndY > gnStartY) {
            alert("Swipe Bottom - Distance " + distance + 'px');  
        } else {
            alert("Swipe Top - Distance " + distance + 'px');      
        }        
    }  

    event.preventDefault();      
});

function nthroot(x,n) {
  try {
    var negate = n % 2 == 1 && x < 0;
    if(negate)
      x = -x;
    var possible = Math.pow(x,1 / n);
    n = Math.pow(possible,n);
    if(Math.abs(x - n) < 1 && (x > 0 == n > 0))
      return negate ? -possible : possible;
  } catch(e){}
}

猜你在找的jQuery相关文章