javascript – 在触摸设备上检测左/右滑动,但允许上/下滚动

我需要检测并对左/右滑动进行反应,但是希望让用户能够在同一个元素上进行滚动,只要他的左手/右手只移动X个像素的最大上/下移动,它不应该滚动,但是当他超过X时,它应该滚动。

所以我做的是:

var startX, startY, $this = $(this);
function touchmove(event) {
        var touches = event.originalEvent.touches;
        if (touches && touches.length) {
            var deltaX = touches[0].pageX - startX;
            var deltaY = touches[0].pageY - startY;
            if (Math.abs(deltaY) > 50) {
                $this.html('X: ' + deltaX + '<br> Y: ' + deltaY + '<br>TRUE');
                $this.unbind('touchmove', touchmove);
                return true;
            } else {
                $this.html('X: ' + deltaX + '<br> Y: ' + deltaY);
                event.preventDefault();
            }
        }
    }

    function touchstart(event) {
        var touches = event.originalEvent.touches;
        if (touches && touches.length) {
            startX = touches[0].pageX;
            startY = touches[0].pageY;
            $this.bind('touchmove', touchmove);
        }
        //event.preventDefault();
    }

但是我没有恢复在“if”的情况下滚动的能力…

感谢任何提示。

我写了自己的触摸处理程序事件。这可以帮助你

它检查:

快速点击:’fc’

向左滑动:’swl’

向右滑动:’swr’

刷一下:’swu’

向下滑动:’swd’

每个检查都会初始化它的通讯事件。但是您可以滚动并执行其他正常操作。你只是有一些新的事件。

你需要swl swr,我建议使用fc(fastclick)来点击事件…它比正常点击快得多。

window.onload=function(){
(function(d){
 var
 ce=function(e,n){var a=document.createEvent("CustomEvent");a.initCustomEvent(n,true,true,e.target);e.target.dispatchEvent(a);a=null;return false},
 nm=true,sp={x:0,y:0},ep={x:0,y:0},
 touch={
  touchstart:function(e){sp={x:e.touches[0].pageX,y:e.touches[0].pageY}},
  touchmove:function(e){nm=false;ep={x:e.touches[0].pageX,y:e.touches[0].pageY}},
  touchend:function(e){if(nm){ce(e,'fc')}else{var x=ep.x-sp.x,xr=Math.abs(x),y=ep.y-sp.y,yr=Math.abs(y);if(Math.max(xr,yr)>20){ce(e,(xr>yr?(x<0?'swl':'swr'):(y<0?'swu':'swd')))}};nm=true},
  touchcancel:function(e){nm=false}
 };
 for(var a in touch){d.addEventListener(a,touch[a],false);}
})(document);
//EXAMPLE OF USE
var h=function(e){console.log(e.type,e)};
document.body.addEventListener('fc',h,false);// 0-50ms vs 500ms with normal click
document.body.addEventListener('swl',h,false);
document.body.addEventListener('swr',h,false);
document.body.addEventListener('swu',h,false);
document.body.addEventListener('swd',h,false);
}

在这种情况下,h是我的每个类型的evnet的处理程序,我添加处理程序到身体。

为什么我理解你的问题,你只需要写

YOURELEMENT.addEventListener('swr',YOURSWIPERIGHTFUNCTION,false);
YOURELEMENT.addEventListener('swl',YOURSWIPELEFTFUNCTION,false);

处理多个元素和相同的函数…只需添加一个处理程序。

所以如果你有

<ul id="ul"><li>1</li><li>2</li><li>3</li></ul>

你做:

var deleteli=function(e){
 var li=e.target;
 console.log('deleting '+li.textContent);
}
document.getElementById('ul').addEventListener('swl',deleteli,false);

对于fc& swr

在ios中有一个bug:不要使用alert()..它将执行2次。

http://stackoverflow.com/questions/17567344/detect-left-right-swipe-on-touch-devices-but-allow-up-down-scrolling

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – 在触摸设备上检测左/右滑动,但允许上/下滚动