Question

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

以下是一些示例x，y开始/结束数据：

（a）从中间左上角向右上方滑动（在这种情况下是不合需要的手势）

21,269 - 278,85

（b）从左中间向右下方斜向滑动（在这种情况下是不合需要的手势）

13,269 - 331,436

（c）从左中间向右中间（一种理想的手势）直接（一种）滑动

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

Answer 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（）函数。

Answer 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表示上左或右下。

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

2 个答案: