使用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){} }