对Tap事件和Tap点透原理的分析

//定义tap函数，传入需要绑定的元素，和一个回调函数
function tap(el,callBack){
    var startTime = 0;
    var maxTime = 250;
    var [startX,startY,endX,endY] = [0,0,0,0]; //es6解构赋值
    el.addEventListener('touchstart',function(e){                            
        console.log('touchstart');
        startTime = Date.now(); //开始触摸的事件  
        startX = e.touches[0].clientX; //手指在浏览器横坐标
        startY = e.touches[0].clientY; //手指在浏览器纵坐标
    })
    el.addEventListener('touchmove',function(e){
        console.log('touchmove');
        endX = e.touches[0].clientX; //手指在浏览器横坐标
        endY = e.touches[0].clientY; //手指在浏览器纵坐标
    })
    el.addEventListener('touchend',function(e){
        console.log('touchend');
        if( (Date.now()-startTime) > maxTime){ //如果超过了最大时间，不触发tap
               console.log('超时了');
            return ; 
        }
        //如果移动距离过大，则不是tap事件。为了大家在电脑上能看到效果，这里设置成了1000，因为在电脑上移动幅度不好控制。如果是在移动端，设置为30就差不多了。
        if(Math.abs(endX-startX) > 1000 || Math.abs(endY-startY) > 1000){
             return;
        }
        callBack(e);
     })
}
tap(document.documentElement,function(e){
    console.log(e);
});