Javascript 如何为移动设备实现刷卡手势？

我有一个用AngularJS制作的应用程序，它有箭头键导航来切换视图

我想使用触摸设备的滑动来实现此导航。我试过图书馆，但不适合刷卡。

---

有人建议我不要使用

是否有其他方法实现刷卡

编辑：

---

它不会干净地检测到刷卡。我在多个设备上测试了它，包括iPad，它需要多个刷卡来做一个动作（在我的例子中进行路由）。我知道，

< P>无耻的插件，但是你可能会考虑我写的一个jQuery插件：

---

它不需要jQuery Mobile，只需要jQuery。

您试过Hammerjs吗？它通过使用触摸速度支持滑动手势。

---

还有一个AngularJS模块，名为angular手势，它基于hammer.js：

---

我根据自己的需要制作了此功能

请随意使用它。在移动设备上非常有效

function detectswipe(el,func) {
  swipe_det = new Object();
  swipe_det.sX = 0; swipe_det.sY = 0; swipe_det.eX = 0; swipe_det.eY = 0;
  var min_x = 30;  //min x swipe for horizontal swipe
  var max_x = 30;  //max x difference for vertical swipe
  var min_y = 50;  //min y swipe for vertical swipe
  var max_y = 60;  //max y difference for horizontal swipe
  var direc = "";
  ele = document.getElementById(el);
  ele.addEventListener('touchstart',function(e){
    var t = e.touches[0];
    swipe_det.sX = t.screenX; 
    swipe_det.sY = t.screenY;
  },false);
  ele.addEventListener('touchmove',function(e){
    e.preventDefault();
    var t = e.touches[0];
    swipe_det.eX = t.screenX; 
    swipe_det.eY = t.screenY;    
  },false);
  ele.addEventListener('touchend',function(e){
    //horizontal detection
    if ((((swipe_det.eX - min_x > swipe_det.sX) || (swipe_det.eX + min_x < swipe_det.sX)) && ((swipe_det.eY < swipe_det.sY + max_y) && (swipe_det.sY > swipe_det.eY - max_y) && (swipe_det.eX > 0)))) {
      if(swipe_det.eX > swipe_det.sX) direc = "r";
      else direc = "l";
    }
    //vertical detection
    else if ((((swipe_det.eY - min_y > swipe_det.sY) || (swipe_det.eY + min_y < swipe_det.sY)) && ((swipe_det.eX < swipe_det.sX + max_x) && (swipe_det.sX > swipe_det.eX - max_x) && (swipe_det.eY > 0)))) {
      if(swipe_det.eY > swipe_det.sY) direc = "d";
      else direc = "u";
    }

    if (direc != "") {
      if(typeof func == 'function') func(el,direc);
    }
    direc = "";
    swipe_det.sX = 0; swipe_det.sY = 0; swipe_det.eX = 0; swipe_det.eY = 0;
  },false);  
}

function myfunction(el,d) {
  alert("you swiped on element with id '"+el+"' to "+d+" direction");
}

如果检测到刷卡，将使用参数元素id和“l、r、u、d”（左、右、上、下）调用函数“myfunction”

例如：

---

我（UlysseBN）基于这个使用了更现代的JavaScript的版本制作的，看起来它在某些情况下表现得更好。如果你认为这应该是一个编辑这个答案让我知道，如果你是原作者，你最终编辑，我会删除我的答案

锤击时间

我使用了Hammer JS，它与手势一起工作。请阅读此处的详细信息：

---

好在它比jquerymobile更轻、更快。你也可以在他们的网站上测试

我喜欢你的解决方案，并在我的网站上实现了它-不过，有一些小小的改进。只是想分享我的代码：

function detectSwipe(id, f) {
    var detect = {
        startX: 0,
        startY: 0,
        endX: 0,
        endY: 0,
        minX: 30,   // min X swipe for horizontal swipe
        maxX: 30,   // max X difference for vertical swipe
        minY: 50,   // min Y swipe for vertial swipe
        maxY: 60    // max Y difference for horizontal swipe
    },
        direction = null,
        element = document.getElementById(id);

    element.addEventListener('touchstart', function (event) {
        var touch = event.touches[0];
        detect.startX = touch.screenX;
        detect.startY = touch.screenY;
    });

    element.addEventListener('touchmove', function (event) {
        event.preventDefault();
        var touch = event.touches[0];
        detect.endX = touch.screenX;
        detect.endY = touch.screenY;
    });

    element.addEventListener('touchend', function (event) {
        if (
            // Horizontal move.
            (Math.abs(detect.endX - detect.startX) > detect.minX)
                && (Math.abs(detect.endY - detect.startY) < detect.maxY)
        ) {
            direction = (detect.endX > detect.startX) ? 'right' : 'left';
        } else if (
            // Vertical move.
            (Math.abs(detect.endY - detect.startY) > detect.minY)
                && (Math.abs(detect.endX - detect.startX) < detect.maxX)
        ) {
            direction = (detect.endY > detect.startY) ? 'down' : 'up';
        }

        if ((direction !== null) && (typeof f === 'function')) {
            f(element, direction);
        }
    });
}

或

如果检测到刷卡，将使用参数元素id调用函数

myfunction

，

“left”

，

“right”

，

“up”

或

“down”
注意：深受启发，我在评论中使用现代javascript对他的脚本进行了编辑。由于用户的兴趣和4h JSFIDLE.net的大量停机时间，我对此做出了回答。我选择不编辑原始答案，因为它会改变一切


这里有一个
detectSwipe
功能，运行非常好（在我的一个网站上使用）。我建议你在使用之前先看一下。请随意查看/编辑答案


//用法示例
detectSwipe（'swipme'，（el，dir）=>alert（'youswip on element with id${el.id}to${dir}direction`）
//源代码
//根据您的需要调整deltaMin。接近0时，它将几乎消失
//总是触发，有一个大的值它永远不会触发。
函数检测擦除（id、func、deltaMin=90）{
常量滑动检测={
sX:0，
sY:0，
例:0,，
安永:0
}
//方向枚举
常量方向=Object.freeze({
向上：‘向上’，
倒:"倒",，
对:"对",，
左：“左”
})
let方向=null
const el=document.getElementById（id）
el.addEventListener（'touchstart'，函数（e）{
常数t=e.t[0]
滑动_det.sX=t.screenX
轻扫_det.sY=t.screenY
}，错）
el.addEventListener（'touchmove'，函数（e）{
//“防止默认设置”将阻止用户滚动，请小心使用
//e.预防违约（）；
常数t=e.t[0]
刷卡_det.eX=t.screenX
轻扫_det.eY=t.screenY
}，错）
el.addEventListener（'touchend'，函数（e）{
const deltaX=swipe_det.eX-swipe_det.sX
常量deltaY=滑动检查eY-滑动检查sY
//最小滑动距离，您可以使用绝对值而不是
//比正方形好，只是感觉更适合个人使用
如果（deltaX**2+deltaY**21）
方向=增量>0？方向。右：方向。左
else//垂直
方向=三角洲>0？方向。向上：方向。向下
if（函数的方向和类型=='function'）func（el，方向）
方向=空
}，错）
}
#swipeme{
宽度：100%；
身高：100%；
背景颜色：橙色；
颜色：黑色；
文本对齐：居中；
垫面：20%；
垫底：20%；
}

刷我
我研究了几种解决方案，但都失败了，滚动和选择文本是最大的困惑。我没有向右滚动，而是关闭了一些框之类的东西

我刚刚完成了我的实现，这一切都是为了我


这是麻省理工学院，所以做你想做的事——是的，这真的很简单——缩小了800字节。您可以在我的（开发中）网站上查看它-swiperight on touch设备应关闭弹出窗口。
您可能需要详细说明您在使用jGestures时遇到的问题。我自己没有使用过它，但它看起来像是我为简单手势支持而编写的自定义代码的健壮版本（在其他地方也看到过）。“建议我不要使用jquery mobile。”为什么？可能是我使用的版本的重复。它工作得很好。听到了很多关于HammerJS的正面评价，我会在其他项目中尝试。谢谢你的回复。我写了一个简单的服务包装。使用Angular非常好。感谢您的推荐！hammerjs使用当前版本的JQuery，而无需迁移JQuery.mobile。没有警告，没有错误。美好的非常感谢。我建议动态设置
minux
：
minux=Math.abs（swipe\u det.eY-swipe\u det.sY）
。模拟其他方向。因为当你向上滑动400px并且只有40px正确时，你可能打算向上滑动。但是，您的代码可以识别正确的滑动。@escapenescape我喜欢您的滑动检测解决方案。但它错误地将单点和双点识别为刷卡。我将如何解决这个问题？我已经对脚本、javascript 1.8和一些逻辑更改进行了一些更新。例如，如果使用delta，则实际上不需要minux、max、minuy和max。此外，通过比较de，在垂直和水平之间进行选择将更加精确
function detectSwipe(id, f) {
    var detect = {
        startX: 0,
        startY: 0,
        endX: 0,
        endY: 0,
        minX: 30,   // min X swipe for horizontal swipe
        maxX: 30,   // max X difference for vertical swipe
        minY: 50,   // min Y swipe for vertial swipe
        maxY: 60    // max Y difference for horizontal swipe
    },
        direction = null,
        element = document.getElementById(id);

    element.addEventListener('touchstart', function (event) {
        var touch = event.touches[0];
        detect.startX = touch.screenX;
        detect.startY = touch.screenY;
    });

    element.addEventListener('touchmove', function (event) {
        event.preventDefault();
        var touch = event.touches[0];
        detect.endX = touch.screenX;
        detect.endY = touch.screenY;
    });

    element.addEventListener('touchend', function (event) {
        if (
            // Horizontal move.
            (Math.abs(detect.endX - detect.startX) > detect.minX)
                && (Math.abs(detect.endY - detect.startY) < detect.maxY)
        ) {
            direction = (detect.endX > detect.startX) ? 'right' : 'left';
        } else if (
            // Vertical move.
            (Math.abs(detect.endY - detect.startY) > detect.minY)
                && (Math.abs(detect.endX - detect.startX) < detect.maxX)
        ) {
            direction = (detect.endY > detect.startY) ? 'down' : 'up';
        }

        if ((direction !== null) && (typeof f === 'function')) {
            f(element, direction);
        }
    });
}

detectSwipe('an_element_id', myfunction);

detectSwipe('another_element_id', my_other_function);