JavaScript 移动端的tap事件

一、移动端的 tap 事件

移动端的单击事件，我们称为 tap 事件，也就是由手指单击所触发的事件。

二、单击事件的特征

单击事件的话，我们的 changedTouches.length = 1，即：TouchList {0: Touch, length: 1}

如果 changedTouches.length > 1，那就说明不止一根手指，进行触摸了。

三、获取触摸位置

我们在获取触摸开始事件的位置时，可以使用targetTouches，但我们在获取触摸结束事件的时候，就不能采用这种的方式。那是因为当手指松开的时候会触发 touchend 事件，此时当前元素已经没有手指对象了，所有无法通过 targetTouches 来获取手指的坐标，此时我们可以通过 changedTouches 来获取手指的坐标。

四、处理 Touch 事件能让你跟踪用户的每一根手指的位置，可以绑定以下四种Touch事件

touchstart:  // 手指放到屏幕上的时候触发
touchmove:  // 手指在屏幕上移动的时候触发
touchend:  // 手指从屏幕上拿起的时候触发
touchcancel:  // 系统取消touch事件的时候触发。至于系统什么时候会取消，不详
 
//属性
client / clientY：// 触摸点相对于浏览器窗口viewport的位置
pageX / pageY：// 触摸点相对于页面的位置
screenX /screenY：// 触摸点相对于屏幕的位置
identifier： // touch对象的unique ID
 
//touchstart事件 
function touchSatrtFunc(e) { 
    //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等 
    var touch = e.touches[0]; //获取第一个触点 
    var x = Number(touch.pageX); //页面触点X坐标 
    var y = Number(touch.pageY); //页面触点Y坐标 
    //记录触点初始位置 
    startX = x; 
    startY = y; 
}
 
//touchmove事件
function touchMoveFunc(e) { 
    //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等 
    var touch = evt.touches[0]; //获取第一个触点 
    var x = Number(touch.pageX); //页面触点X坐标 
    var y = Number(touch.pageY); //页面触点Y坐标 
    var text = 'TouchMove事件触发：（' + x + ', ' + y + '）'; 
    //判断滑动方向 
    if (x - startX != 0) { 
        //左右滑动 
    } 
    if (y - startY != 0) { 
        //上下滑动 
    } 
}