使用 jQuery 确定 Android 取消/返回滑动（从左向右滑动）答案

【问题标题】：Determining Android Cancel/Back Swipe (Swipe Left To Right) with jQuery使用 jQuery 确定 Android 取消/返回滑动（从左向右滑动）
【发布时间】：2011-01-17 03:04:59
【问题描述】：

在 Android 上，不使用 Sencha 或 JQTouch 或 JQMobile 之类的框架，而是使用 jQuery（常规 jQuery），我想检测取消/返回滑动（从左向右滑动）。到目前为止我已经完成了一些事情，但是我正在尝试确定要在 jQuery 中实现的数学公式，以便我捕获从左到右的滑动事件，而不是另一种手势。你有什么建议？我想我需要某种可接受的差异。我假设有某种微积分公式可以在这里重新应用，但不幸的是我在大学里回避了微积分。所以，希望你的回答能教育我。

这里有一些示例 x,y 开始/结束数据可供使用：

(a) 从左中到右上角沿对角线滑动（在这种情况下是不受欢迎的手势）

21,269 - 278,85

(b) 从左中到右下沿对角线滑动（在这种情况下是不受欢迎的手势）

13,269 - 331,436

34,267 - 326,266

或

36,494 - 355,479

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

window.addEventListener('touchstart',function(event) {
  gnStartX = event.touches[0].pageX;
  gnStartY = event.touches[0].pageY;
},false);

window.addEventListener('touchmove',function(event) {
  gnEndX = event.touches[0].pageX;
  gnEndY = event.touches[0].pageY;
},false);

window.addEventListener('touchend',function(event) {
  alert('START (' + gnStartX + ', ' + gnStartY + ')   END (' + gnEndX + ', ' + gnEndY + ')');
},false);

【问题讨论】：

标签： jquery android swipe calculus

【解决方案1】：

我通过反复试验发现这可以多么简单，不需要微积分。以毫秒为单位的时间必须相当快，所以 350 毫秒或更短。 Y 方差应为 +40 或 -40。距离应为 240 像素。

但是请注意，我在代码中使用了这个 META 标记来处理与设备无关的像素：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

以及我处理返回/取消滑动事件的方式：

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

window.addEventListener('touchstart',function(event) {
  gnStartX = event.touches[0].pageX;
  gnStartY = event.touches[0].pageY;
  gnStartTime = Number(new Date());
},false);

window.addEventListener('touchmove',function(event) {
  gnEndX = event.touches[0].pageX;
  gnEndY = event.touches[0].pageY;
  gnEndTime = Number(new Date());
},false);

window.addEventListener('touchend',function(event) {
  var nDiffTime = gnEndTime - gnStartTime;
  var nDiffX = gnEndX - gnStartX;
  var nDiffY = gnEndY - gnStartY;
  // is this a swipe back/cancel event?
  if ((nDiffTime <= 350) && (nDiffX >= 240) && (nDiffY >= -40) && (nDiffY <= 40)) {
    event.preventDefault();
    goBack();
  }
},false);

只需用这个实现自己的 goBack() 函数。

【讨论】：

【解决方案2】：

滑动意图的一个可能很好的指标可能是滑动线的斜率：

var nDiffX = gnEndX - gnStartX;
var nDiffY = gnEndY - gnStartY;
var nSlope = nDiffY / Math.max(0.001,nDiffX);

if ((nDiffTime <= 350) && (Math.abs(nDiffX) >= 240)) {
  event.preventDefault();
  if ((nSlope > -0.125)&&(nSlope < 0.125)) {
    // Between lines of 1/8 and -1/8 slope - close enough to straight horizontal
    if (nDiffX > 0) {
      // Swiped to the right
    } else {
      // Swiped to the left
    }
  }
  goBack();
}

类似地，您可以检查斜率是否接近 1 表示右上或左下滑动，-1 表示左上或右下。

【讨论】：