Androidの決定JQUERYでキャンセル/バックスワイプ（左にスワイプ）

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

試行錯誤を通して、これがどれほど単純であるか、計算は必要ありません。ミリ秒単位での時間はかなり速いため、350m以下でなければなりません。 Yの分散は+40または-40でなければなりません。距離は240ピクセルでなければなりません。

ただし、デバイスに依存しないピクセルに関するコードでこのメタタグを使用していることに注意してください。

<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かどうかを確認できます。