touch事件解析判断拖动方向

jquery touch事件解析及方向判断

介绍：

touch事件在jQuery的高版本 用on来实现 $('div').on('touchstart', function(e) { …… }); 


touchstart  触摸开始的时候触发
touchmove   手指在屏幕上滑动的时候触发
touchend    触摸结束的时候触发


touches 当前位于屏幕上的所有手指列表（返回的是一个数组）
targetTouches  位于当前DOM元素上所有的手指列表（返回的也是一个数组）
changedTouches 涉及当前事件手指的列表（发生变化的触点）
identifier     一个数值，唯一标识触摸会话（touch session）中的当前手指。一般从0开始的流水号
target  DOM元素，是动作所针对的目标

// 手指在Body中点击时的记录
$("body").on("touchstart", function(e) {
    startX = e.originalEvent.changedTouches[0].pageX;  // 记录 最初点击时第一个触摸点的x坐标
    startY = e.originalEvent.changedTouches[0].pageY;  // 记录 最初点击时第一个触摸点的y坐标

    console.log(e);
});

// 阻止touchmove时的body默认事件
$('body').on('touchmove', function(e) {
    e.preventDefault();
});

// 记录/操作 当手指离开的操作
$("body").on("touchend", function(e) {
    var moveEndX = e.originalEvent.changedTouches[0].pageX;   //  手指离开时的x坐标
    var moveEndY = e.originalEvent.changedTouches[0].pageY;   //  手指离开时的y坐标
    var X = moveEndX - startX; // 离开时的x坐标 - 开始触摸的x坐标 = 横向偏移值
    var Y = moveEndY - startY; // 离开时的y坐标 - 开始触摸的y坐标 = 纵向偏移值

    if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {       // 从左到右
        alert("left 2 right");
    }
    else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {  // 从右到左
        alert("right 2 left");
    }
    else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {   // 从上到下
        alert("top 2 bottom");
    }
    else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {  // 从下到上
        alert("bottom 2 top");
    }
    else{
        alert("just touch");
    }
});

js使用touch事件

document.addEventListener("touchstart", function() {}, false);  // false- 默认。事件句柄在冒泡阶段执行