移动端touch事件

touch包含三个touch事件：
1、touchstart：手指触摸到一个 DOM 元素时触发。
2、touchmove：手指在一个 DOM 元素上滑动时触发。
3、touchend：手指从一个 DOM 元素上移开时触发。
touch触发后其事件中都包含三个触摸列表，其中都包含手指触摸的一些数据：
touches:当前位于屏幕下的手指列表信息
targetTouches: 当前位于当前元素下的手指列表信息
changedTouches: 当前涉及到当前事件的手指列表
比如touchstart触发的事件中的targetTouches列表中有几个手指触发了事件就会有几个对象，其中还包含了一些数据，比如clientX表示触摸点在浏览器可视窗口中的横坐标。
当想要获取手指离开时的手指数据时使用changedTouches属性，此时touches和targetTouches列表长度都为0

target 此外事件当中的target表示事件触发的dom元素，可以使用e.target来获取当前touch事件触发的元素节点来执行操作。当有多个元素触发touch事件执行相同的函数时可以使用e.target来获取当前的元素。
touch事件的拖动案例：

window.onload=function () {
    var div=document.querySelector(".touchDiv");
    var startX,startY,moveX,moveY,distanceX,distanceY;
    //touch包含三个touch事件，触发后其事件中都包含三个触摸列表，包含手指触摸的一些数据
    //移动端中推荐使用addEventListener来绑定事件
    div.addEventListener("touchstart",function (e) {
        //touchstart是手指触摸到DOM元素触发的时间，
        startX=e.targetTouches[0].clientX;
        startY=e.targetTouches[0].clientY;
        console.log(e);
        console.log(e.target);
    });
    div.addEventListener("touchmove",function (e) {
        //记录手指触摸移动时的坐标值
        moveX=e.targetTouches[0].clientX;
        moveY=e.targetTouches[0].clientY;
        //计算手指触摸移动时的位置偏移
        distanceX=moveX-startX;
        distanceY=moveY-startY;
        div.style.transform="translate("+distanceX+"px,"+distanceY+"px)";
    });
    div.addEventListener("touchend",function (e) {

    });
}