基于触屏事件来封装移动端的点击事件，解决click事件在移动端的延时问题。

并不是说click事件在移动端有效率上问题，而是因为在移动端需要判断执行单击操作还是双击操作。早期移动设备浏览器网页时内容非常小，为了增强用户体验，苹果公司专门为移动设备设计了双击放大的功能，确保用户可以非常方便的放大网页内容，但是当用户单击一个按钮时，移动设备会延时（约300ms）执行，判断用户是否要双击。用触屏事件可以解决这个问题。

1.首先要知道单击是什么，怎样算的上点击操作？

（1）屏幕上只有一根手指（区分双击或多击）

（2）判断按下的时间（区分长按事件）

（3）判断按下的位置与离开的位置之间的差距，允许一定范围呢的误差（区分滑动事件）

2.既然我们已经知道了这一点那么我们就来封装我们自己的 单击事件。

 var startTime,startX,startY;
        dom.addEventListener("touchstart",function(e){
            /*判断是否只有一根手指进行操作*/
            if(e.targetTouches.length > 1){
                return;
            }
            /*记录手指开始触摸的时间*/
            startTime=Date.now();
            /*记录当前手指的坐标*/
            startX= e.targetTouches[0].clientX;
            startY= e.targetTouches[0].clientY;
        })

div.addEventListener("touchend",function(e){
        /*判断是否只有一根手指进行操作*/
        if(e.changedTouches.length > 1){ //说明不止一个手指
            return;
        }
        /*判断时间差异  150ms*/
        console.log(Date.now()-startTime);
        if(Date.now()-startTime > 150){ //长按操作
            return;
        }
        /*判断松开手指时的坐标与触摸开始时的坐标的距离差异*/
        var endX=e.changedTouches[0].clientX;
        var endY=e.changedTouches[0].clientY;
        /*这里暂且将距离差异定为6*/
        if(Math.abs(endX-startX) < 6 && Math.abs(endY-startY) <6){
            console.log("这就是移动端的单击事件--tap事件");
        }
    })

把上面的判断条件封装在你函数中，代码如下

var myTap={
    //dom:传入的dom元素让我们可以为任意的元素添加tap事件
    tap:function(dom,callback){
       // 判断是否传入对象同时对象应该是一个dom元素
        if(!dom || typeof  dom!="object"){
            return;
        }
        var startTime,startX,startY;
        dom.addEventListener("touchstart",function(e){
            /*判断是否只有一根手指进行操作*/
            if(e.targetTouches.length > 1){
                return;
            }
            /*记录手指开始触摸的时间*/
            startTime=Date.now();
            /*记录当前手指的坐标*/
            startX= e.targetTouches[0].clientX;
            startY= e.targetTouches[0].clientY;
        })
        dom.addEventListener("touchend",function(e){
            //判断是否只有一根手指进行操作
            if(e.changedTouches.length > 1){
                return;
            }
            if(Date.now()-startTime > 150){ //长按操作
                return;
            }
            //判断松开手指时的坐标与触摸开始时的坐标的距离差异
            var endX=e.changedTouches[0].clientX;
            var endY=e.changedTouches[0].clientY;
            //这里暂且将距离差异定为6
            if(Math.abs(endX-startX) < 6 && Math.abs(endY-startY) <6){
                //判断用户是否传入的回调函数
                callback &&(typeof callback === 'function') &&callback(e);
            }
        })
    }
};

以上就是我们自己封装的移动端单击事件，我们习惯上叫他tap事件。