移动端上下左右滑动监听

手指上滑下滑监听:

$(".map_study_button_box").on("touchstart", function (even) {
    var touch = event.targetTouches[0];     //touches数组对象获得屏幕上所有的touch,取第一个touch
    startPos = {x:touch.pageX,y:touch.pageY,time:+new Date};    //取第一个touch的坐标值
}).on("touchmove", function (even) {
    if(even.originalEvent.targetTouches.length > 1 || even.scale && even.scale !== 1) return;
    var touch = even.originalEvent.targetTouches[0];
    endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
    isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0;    //isScrolling为1时,表示纵向滑动,0为横向滑动
}).on("touchend", function (even) {
    var duration = +new Date - startPos.time;    //滑动的持续时间
    //纵向滑动,如果最后欧的坐标值为负数则代表是向上滑动
    if (isScrolling == 1 && endPos.y < -40) {
        
    }
    endPos.y = 0;  //第一次滑动完后清空这个值,防止影响第二次滑动
})

你可能感兴趣的:(移动端上下左右滑动监听)