确定的Andr​​oid取消/返回刷卡（刷卡左到右）与jQuery [英] Determining Android Cancel/Back Swipe (Swipe Left To Right) with jQuery

问题描述

在了Android，而无需使用像煎茶或JQTouch或JQMobile一个框架，但使用jQuery（普通jQuery的），我要检测取消/返回刷卡（左划屏到右）。我有一些成就，到目前为止，但我试图确定数学公式jQuery中实现这样的，我捕捉到左向右轻扫事件，而不是另一种姿态。你有什么建议？我想我需要某种形式的可接受方差。我假设有某种形式的演算公式，可以到这里重新申请的，但不幸的是我在大学里回避演算。所以，你的答案会教育我，希望。

下面是一些示例的x，y开始/结束数据一起玩：

（a）由中间刷卡斜左到右上（在这种情况下，不希望的手势）

21269 - 278,85

（b）由中间刷卡斜左到右下角（在这种情况下，不希望的手势）

13269 - 331436

（三）刷卡（在某种程度上）直接从中间左中右（理想的姿势）

34,267 - 326266

或

36494 - 355479

  VAR gnStartX = 0;
变种gnStartY = 0;
变种gnEndX = 0;
变种gnEndY = 0;

window.addEventListener（'touchstart'，函数（事件）{
  gnStartX = event.touches [0] .pageX;
  gnStartY = event.touches [0] .pageY;
}，假）;

window.addEventListener（'touchmove'，函数（事件）{
  gnEndX = event.touches [0] .pageX;
  gnEndY = event.touches [0] .pageY;
}，假）;

window.addEventListener（'touchend'，函数（事件）{
  警报（'开始（+ gnStartX +'，'+ gnStartY +'）结束（+ gnEndX +'，'+ gnEndY +'）'）;
}，假）;
 

解决方案

我试错多么简单，这可能是没有必要的演算发现过。以毫秒为单位的时间必须相当快，所以350毫秒以下。在Y变化应该是+ 40或-40。的距离应该240像素。

但是请注意，我用这个元标记在我的关于与设备无关的像素code：

 ＆LT; META NAME =视口内容=WIDTH =装置宽度，初始规模= 1.0，用户可扩展性=无＆GT;
 

和我处理一回路上/取消刷卡事件：

  VAR gnStartX = 0;
变种gnStartY = 0;
变种gnStartTime = 0;
变种gnEndX = 0;
变种gnEndY = 0;
变种gnEndTime = 0;

window.addEventListener（'touchstart'，函数（事件）{
  gnStartX = event.touches [0] .pageX;
  gnStartY = event.touches [0] .pageY;
  gnStartTime数=（新日期（））;
}，假）;

window.addEventListener（'touchmove'，函数（事件）{
  gnEndX = event.touches [0] .pageX;
  gnEndY = event.touches [0] .pageY;
  gnEndTime数=（新日期（））;
}，假）;

window.addEventListener（'touchend'，函数（事件）{
  VAR nDiffTime = gnEndTime  -  gnStartTime;
  VAR nDiffX = gnEndX  -  gnStartX;
  VAR nDiffY = gnEndY  -  gnStartY;
  //这是一个重击回/取​​消的事件吗？
  如果（（nDiffTime＆其中; = 350）及及（nDiffX＆GT; = 240）及及（nDiffY＆GT; = -40）及及（nDiffY＆其中; = 40））{
    。事件preventDefault（）;
    回去（）;
  }
}，假）;
 

一个只需要实现自己的GoBack的（）这个函数。

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].pageX;
  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.

这篇关于确定的Andr​​oid取消/返回刷卡（刷卡左到右）与jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！