移动端tap事件，也称移动端的click事件-蒲公英云

移动端tap事件，也称移动端的click事件

pc端的的click事件在移动端也是可以出发的，只是在移动端会出现延迟的现象，早期移动设备浏览器网页时内容比较小，为增强用户体验，苹果公司专门为移动设备设计了双击放大的功能，确保用户可以非常方便的放大网页内容，但是当用户单击一个按钮时，移动设备会延时（约300ms）执行，判断用单是否要双击。用触屏事件可以解决这个问题。
移动端单击事件时：要注意的问题有：
1、单击只有一个手指操作；
2、判断手指开始触摸和手指松开的时间差异不能大于一定值：300/150；这就类似是长按操作判断。
3、保证没有滑动操作，如果有，要保证在一定范围内。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title></title>
         <style>
            div{
                width: 100px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div></div>
        <script>
            //单击只有一个手指操作；判断手指开始触摸和手指松开的时间差异不能大于一定值：300/150；保证没有滑动操作，如果有，要保证在一定范围内。
            var div = document.querySelector("div");
            var startTime, startX, startY;
            div.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.targetTouches.length > 1){//多个
                    return;
                }
                //判断时间差异 150ms
                if(Date.now() - startTime> 150){
                    return;
                }
                //判断松开手指时的坐标与触摸开始时的坐标的距离差异
                var endX = e.changedTouches[0].clientX;
                var endY = e.changedTouches[0].clientY;
                if(Math.abs(endX - startX) < 6 && Math.abs(endY - startY) < 6){
                    console.log("tap事件")
                }
            });
        </script>
    </body>
</html>

**封装tap事件

//封装移动端的tap事件
var itcast = {
    tap: function(domEle, callback){
        //判断传如对象是否是dom元素
        if(!domEle || typeof domEle != "object"){
            return;
        }
            var startTime, startX, startY;
            domEle.addEventListener("touchstart", function(e){
                //判断是否只有一根手指
                if(e.targetTouches.length > 1){
                    return;
                }
                //记录当前手指开始触摸的时间
                startTime = Date.now();
                //当前坐标
                startX = e.targetTouches[0].clientX;
                startY = e.targetTouches[0].clientY;
            });
            domEle.addEventListener("touchend", function(e){
                //判断是否只有一根手指在操作
                if(e.targetTouches.length > 1){//多个
                    return;
                }
                //判断时间差异 150ms
                if(Date.now() - startTime> 150){
                    return;
                }
                //判断松开手指时的坐标与触摸开始时的坐标的距离差异
                var endX = e.changedTouches[0].clientX;
                var endY = e.changedTouches[0].clientY;
                if(Math.abs(endX - startX) < 6 && Math.abs(endY - startY) < 6){
                    console.log("tap事件");
                    //判断是否传入回调函数
                    callback && callback();
                }
            });
    }
}