JavaScript-检测滑动按钮？

我有一个按钮，我想知道你是否可以（在移动平台上）允许用户按住并滑动按钮。这将导致调用函数：

按钮+（向上滑动按钮）=呼叫功能

---

这对移动浏览器来说是可能的吗。谢谢

我过去使用Hammer.js很成功。您可以通过本机实现这一点，但我认为使用Hammer.js总体上更容易

---

您可以使用此功能：

$(window).load(function(){
  detectswipe('btnid',myfunc);
});

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 = 100;    //min x swipe for horizontal swipe
var max_x = 100;    //max x difference for vertical swipe
var min_y = 100;    //min y swipe for vertical swipe
var max_y = 100;    //max y difference for horizontal swipe
var direc = "";
ele = document.getElementById(el);
if(ele==null){
    return;
}
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){
    var t = e.touches[0];
    swipe_det.eX = t.screenX;
    swipe_det.eY = t.screenY;
},false);
ele.addEventListener('touchend',function(e){
    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 = "right";
        else direc = "left";
    }
    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 = "down";
        else direc = "up";
    }
    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 myfunc(el,d){
 if(d=="up"){
   console.log("do Some Work!!");//or any function which you want to call on swipe up/down(matter of prespective,change "up" to down if you want the other way).
 }
}

$（窗口）.load（函数（）{
检测擦除（'btnid'，myfunc）；
});
功能检测擦除（el，func）{
滑动=新对象（）；
swipe_det.sX=0；swipe_det.sY=0；swipe_det.eX=0；swipe_det.eY=0；
var min_x=100；//水平滑动的最小x滑动
var max_x=100；//垂直滑动的最大x差
var min_y=100；//垂直滑动的最小y滑动
var max_y=100；//水平滑动的最大y差
var direc=“”；
ele=document.getElementById（el）；
if（ele==null）{
返回；
}
ele.addEventListener（'touchstart'，函数（e）{
var t=e.t[0]；
滑动_det.sX=t.screenX；
轻扫_det.sY=t.screenY；
}，假）；
ele.addEventListener（'touchmove'，函数（e）{
var t=e.t[0]；
swipe_det.eX=t.screenX；
轻扫_det.eY=t.screenY；
}，假）；
ele.addEventListener（'touchend'，函数（e）{
如果（（（swipe_det.eX-min_x>swipe_det.sX）；（swipe_det.eX+min_xswipe_det.eY-max_y）&（swipe_det.eX>0）））{
if（swipe_det.eX>swipe_det.sX）direc=“right”；
else direc=“左”；
}
如果（（（swipe_det.eY-minu_y>swipe_det.sY）；（swipe_det.eY+minu_yswipe_det.eX-max_x）&（swipe_det.eY>0）））{
如果（swipe_det.eY>swipe_det.sY）direc=“down”；
else direc=“向上”；
}
如果（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；
}，假）；
}
函数myfunc（el，d）{
如果（d=“向上”）{
console.log（“做一些工作！！”；//或任何您想在向上/向下滑动时调用的函数（如果您想用另一种方式，请将“向上”更改为“向下”）。
}
}

它通过触摸事件检测滑动方向。

---

我在我的项目中使用了这个功能，它在所有触摸设备上都能很好地工作：）

当然，大多数手机库都包含“刷起”事件，所以要么使用库，要么弄清楚它们是如何做到的。@adeneo，你能推荐一个源吗？（最好不要使用jQuery mobile）您对将其合并到标准JavaScript中有何建议，因为我无法完全了解hammer.js。IE:举个例子，我想说通读一下，这真的很有帮助。你也可以看看这个：（它不是我的，但我发现它在我使用锤子的时候很有用！）