Determining Android Cancel/Back Swipe (Swipe Left To Right) with jQuery

On the Android, without using a framework like Sencha or JQTouch or JQMobile, but using jQuery (regular jQuery), I want to detect a Cancel/Back Swipe (swiping left to right). I have something accomplished so far, but I'm trying to determine the math formula to implement in jQuery such that I capture a left to right swipe event, and not another kind of gesture. What do you suggest? I imagine I need some kind of acceptable variance. I'm assuming there's some sort of calculus formula that could get reapplied here, but unfortunately I shied away from calculus in college. So, your answer will educate me, hopefully.

Here's some sample x,y start/finish data to play with:

(a) Swiping diagonally from middle left to upper right (an undesirable gesture in this case)

21,269 - 278,85

(b) Swiping diagonally from middle left to lower right (an undesirable gesture in this case)

13,269 - 331,436

(c) Swiping straight (sort of) from middle left to middle right (a desirable gesture)

34,267 - 326,266

or

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].page开发者_Go百科X;
  gnEndY = event.touches[0].pageY;
},false);

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

---

I found through trial and error how simple this could be, no Calculus necessary. The time in milliseconds must be fairly fast, so 350ms or less. The Y variance should be +40 or -40. The distance should be 240 pixels.

Note however that I'm using this META tag in my code regarding device-independent pixels:

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

And the way I'm handling a back/cancel swipe event:

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

One just needs to implement their own goBack() function with this.

---

A possibly good indicator of swiping intention could be the slope of the swipe-line:

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

Similarly, you could check to see if the slope is nearish to 1 for up-right or down-left swiping, -1 for up-left or down-right.