移动端触摸事件

ouchstart 开始触摸
touchmove 手指移动
touchend 结束触摸
touchstart 在手指触摸的一瞬间发生，如果有多个手指触摸，每个手指触摸的时候都会发生。
touchend 在手指离开屏幕的一瞬间发生，如果有多个手指离开，每个手指离开的时候都是触发这个事件。
绑定他们的时候，只能用DOM2级来绑定，不能用window.on*来绑定。**

<script type="text/javascript">
        var box = document.querySelector("#box");

        box.addEventListener("touchstart", function(){
            box.innerHTML = "你触摸了我";
        }, true);

        box.addEventListener("touchend", function(){
            box.innerHTML = "你结束触摸了我";
        }, true);
    </script>

注意，touchstouch事件和touchmove事件中event事件对象中有一个属性叫做touches是一个数组，里面封装了每个手指的信息，包括手指的位置、手指的粗细、力度（仅仅iPhone7提供）都有.
每根手指的位置信息：

//触摸移动
box.addEventListener("touchmove", function(event){
    //阻止默认事件
    event.preventDefault();
    //得到每个手指的信息
    var fingers = event.touches;
    //清空
    box.innerHTML = "";
    //遍历每个手指，显示信息
    for(var i = 0 ; i < fingers.length ; i++){
        box.innerHTML += "第" + i + "根手指位置" + fingers[i].clientX + "," + fingers[i].clientY + "<br />";
    }
}, true);

最后说一个问题，就是手机中也有click事件，但是click事件比touchstart要晚触发200ms到300ms左右，因为浏览器有默认的一些手指快捷操作，比如双击两次放大视口。如果你用click写了一个div的单击事件，此时点击之后浏览器会等待200~300ms时间看看你有没有第二次点击，如果200~300ms以内没有点击，此时触发你的click事件，如果有点击，则你的click事件业务不发生，而是放大视口。但是touchstart不会等待，只要你碰到了屏幕一定会执行touchstart事件。
注意，a标签执行的是类似click事件，等于说a标签被延迟了200~300触发，所以手机web中越来越不使用a标签跳转了，而是touchstart事件跳转。方法就是让元素携带data-href属性，然后用js批量给他们绑定的touchstart事件，让window.location切换为自己携带的data-href属性的值。

<div id="box"data-herf="http://m.taobao.com"></div>
<div id="box"data-herf="http://m.dangdang.com"></div>

var herfBoxs = document.querySelectorAll("[data-herf]");
for(var i = 0 ; i < herfBoxs.length ; i++){
    herfBoxs[i].index = i;
    herfBoxs[i].addEventListener("touchstart", function(){
        window.location = this.getAttribute("data-herf");
    }, true);
}