js移动端点击事件 ：touchstart + touchend

js移动端点击事件封装函数：

移动端的手指事件，与电脑短的点击onclick是不一样的。

移动端事件有：

touchstart  手指按下

touchend 手指抬起

二者组合起来才是一个完整的“点击”事件。

但是手指按下和抬起的移动距离如果过大，就不是点击，而是滑动了；因此要限定手指按下和手指抬起的一个距离。

分析完毕，直接上代码：

//先定义一个新事件名称，如tap
var tap = new Event("tap",{
        bubbles: true
    });
//获取手指按下时的坐标
    document.startPoint = {};
    document.addEventListener("touchstart",function(e){
        document.startPoint = {
            x: e.changedTouches[0].pageX,
            y: e.changedTouches[0].pageY
        }
    });
//获取手指抬起时的坐标
    document.addEventListener("touchend",function(e){
        var now = {
            x: e.changedTouches[0].pageX,
            y: e.changedTouches[0].pageY
        };
//限定抬起的坐标与按下时不超过5px，如果满足条件则派发tap点击事件
        if(Math.abs(now.x - document.startPoint.x)+Math.abs(now.y - document.startPoint.y) < 5){
            // 派发事件
            e.target.dispatchEvent(tap);
        }
    });
}

整段粘走，在js中就可以直接进行“tap”点击事件监听了

例如：

#box.addEventListener("tap",function(){

//box被点击了！

})