如何通过jQuery Mobiles滑动事件获得方向和距离
使用jQuery Mobiles滑动事件时，是否可以在回调函数中获取方向和距离？ 我在官方文档中没有发现任何相关内容。
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){} }
你也可以使用hammer.js。 有两个事件 – 滑动和点击。 在hammer.js中，可以获得方向和距离。 tap事件也是较新的jQuery版本的一部分 – 您不需要仅为tap事件包含jquery-mobile。
文档hammer.js
希望对你有效。