使用touch:
1.绑定事件：box.addEventListener('touchstart',function () { });
2.事件对象：
名字：TouchList------触摸点（一个手指触摸就是一个触发点，和屏幕的接触点的个数）的集合
changedTouches    改变后的触摸点集合
targetTouches     当前元素的触发点集合
touches           页面上所有触发点集合
3.触摸点集合在每个事件触发的时候会不会去记录触摸
changedTouches 每个事件都会记录
targetTouches，touches 在离开屏幕的时候无法记录触摸点
4.分析滑动实现的原理：
4.1 就是让触摸的元素随着手指的滑动做位置的改变
4.2 位置的改变：需要当前手指的坐标
4.3 在每一个触摸点中会记录当前触摸点的坐标 e.touches[0] 第一个触摸点
4.4 clientX clientY      基于浏览器窗口（视口）
4.4 pageX   pageY        基于页面（视口

window.onload = function () {
    /*1. 理解移动端的手势事件*/
    /*2. swipe swipeLeft  swipeRight swipeUp swipeDown */
    /*3. 左滑和右滑手势怎么实现*/
    var bindSwipeEvent = function (dom,leftCallback,rightCallback) {
        /*手势的条件*/
        /*1.必须滑动过*/
        /*2.滑动的距离50px*/
        var isMove = false;
        var startX = 0;
        var distanceX = 0;
        dom.addEventListener('touchstart',function (e) {
            startX = e.touches[0].clientX;
        });
        dom.addEventListener('touchmove',function (e) {
            isMove = true;
            var moveX = e.touches[0].clientX;
            distanceX = moveX - startX;
        });
        dom.addEventListener('touchend',function (e) {
            /*滑动结束*/
            if(isMove && Math.abs(distanceX) > 50){
                if(distanceX > 0){
                    rightCallback && rightCallback.call(this,e);
                }else{
                    leftCallback && leftCallback.call(this,e);
                }
            }
            /*重置参数*/
            isMove = false;
            startX = 0;
            distanceX = 0;
        });
    }
    bindSwipeEvent(document.querySelector('.box'),function (e) {
        console.log(this);
        console.log(e);
        console.log('左滑手势');
    },function (e) {
        console.log(this);
        console.log(e);
        console.log('右滑手势');
    });

}

window.onload = function () {
    /*使用tap事件*/
    /*1. 响应的速度比click要快   150ms */
    /*2. 不能滑动*/
    var bindTapEvent = function (dom, callback) {
        /*事件的执行顺序*/
        /*在谷歌浏览器模拟看不到300ms的效果*/
        /*在真机上面才能看看到延时效果*/
        var startTime = 0;
        var isMove = false;
        dom.addEventListener('touchstart', function () {
            //console.log('touchstart');
            startTime = Date.now();
            /*Date.now();*/
        });
        dom.addEventListener('touchmove', function () {
            //console.log('touchmove');
            isMove = true;
        });
        dom.addEventListener('touchend', function (e) {
            //console.log('touchend');
            console.log((Date.now() - startTime));
            if ((Date.now() - startTime) < 150 && !isMove) {
                callback && callback.call(this, e);
            }

            startTime = 0;
            isMove = false;
        });
        /*dom.addEventListener('click',function () {
         //console.log('click');
         });*/
    }

    bindTapEvent(document.querySelector('.box'), function (e) {
        console.log(this);
        console.log(e);
        console.log('tap事件')
    });
}