移动端为何不使用click而模拟tap事件及解决方案

移动端click会遇到2个问题，click会有200-300ms的延迟，同时click事件的延迟响应，会出现穿透，即点击会触发非当前层的点击事件。

 

为什么会存在延迟？

Google开发者文档中有提到：

mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.

      移动浏览器为什么会设置300毫秒的等待时间呢？这与双击缩放的方案有关。平时我们有可能已经注意到了，双击缩放，即用手指在屏幕上快速点击两次，可以看到内容或者图片放大，再次双击，浏览器会将网页缩放至原始比例。

      浏览器捕获第一次单击后，会先等待一段时间，如果在这段时间区间里用户未进行下一次点击，则浏览器会做单击事件的处理。如果这段时间里用户进行了第二次单击操作，则浏览器会做双击事件处理。这段时间就是上面提到的300毫秒延迟。

 

touch事件的来源

PC网页上的大部分操作都是用鼠标的，即响应的是鼠标事件，包括mousedown、mouseup、mousemove和click事件。一次点击行为，事件的触发过程为：mousedown -> mouseup -> click 三步。

手机上没有鼠标，所以就用触摸事件去实现类似的功能。touch事件包含touchstart、touchmove、touchend，注意手机上并没有tap事件。手指触发触摸事件的过程为：touchstart -> touchmove -> touchend。

手机上没有鼠标，但不代表手机不能响应mouse事件（其实是借助touch去触发mouse事件）。有人在PC和手机上对事件做了对比实验，以说明手机对touch事件相应速度快于mouse事件

 

点击穿透问题

点击穿透现象主要有3种：

1点击穿透问题：点击蒙层（mask）上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件，蒙层的关闭按钮绑定的是touch事件，而按钮下面元素绑定的是click事件，touch事件触发之后，蒙层消失了，300ms后这个点的click事件fire，event的target自然就是按钮下面的元素，因为按钮跟蒙层一起消失了

2跨页面点击穿透问题：如果按钮下面恰好是一个有href属性的a标签，那么页面就会发生跳转，因为a标签跳转默认是click事件触发，所以原理和上面的完全相同

3另一种跨页面点击穿透问题：这次没有mask了，直接点击页内按钮跳转至新页，然后发现新页面中对应位置元素的click事件被触发了，和蒙层的道理一样，js控制页面跳转的逻辑如果是绑定在touch事件上的，而且新页面中对应位置的元素绑定的是click事件，而且页面在300ms内完成了跳转，三个条件同时满足，就出现这种情况了

4非要细分的话还有第四种，不过概率很低，就是新页面中对应位置元素恰好是a标签，然后就发生连续跳转了。。。诸如此类的，都是点击穿透问题

 

为什么会出现点透

 click延迟，延迟，还是延迟。

在移动端不使用click而用touch事件代替触摸是因为click事件有着明显的延迟，具体touchstart与click的区别如下：

1.touchstart：在这个DOM（或冒泡到这个DOM）上手指触摸开始即能立即触发

2.click：在这个DOM（或冒泡到这个DOM）上手指触摸开始，且手指未曾在屏幕上移动（某些浏览器允许移动一个非常小的位移值），且在这个在这个dom上手指离开屏幕，且触摸和离开屏幕之间的间隔时间较短（某些浏览器不检测间隔时间，也会触发click）才能触发。

也就是说，事件的触发时间按由早到晚排列为：touchstart 早于 touchend 早于 click。亦即click的触发是有延迟的，这个时间大概在300ms左右。

由于我们在touchstart阶段就已经隐藏了罩层A，当click被触发时候，能够被点击的元素则是其下的B元素，根据click事件的触发规则：只有在被触发时，当前有click事件的元素显示，且在面朝用户的最前端时，才触发click事件。

由于B绑定了click事件（或者B本身默认存在click事件），所以B的click事件被触发，产生了点透的情况。

 

点透的解决方案

1. 使用fastclick库，其实现思路是，取消 click 事件（参看源码 164-173 行），用 touchend 模拟快速点击行为（参看源码 521-610 行）。

FastClick.attach(document.body);

从此所有点击事件都使用click，不会出现“穿透”的问题，并且没有300ms的延迟。

然后给需要“无延迟点击”的元素绑定click事件（注意不再是绑定zepto的tap事件）即可。

也可以不在body上初始化它，而在某个dom上初始化，这样，只有设个dom和它的子元素才能享受"无延迟"的点击

实践开发中，当元素绑定fastclick后，click响应速度比tap还要快一点。

2.为元素绑定touchend事件，并在内部加上e.preventDefault();

$demo.on('touchend',function(e){

//改变了事件名称，tap是body上才被触发，而touchend是原生的事件，在dom本身上就会被捕获触发

$demo.hide();

e.preventDefault();//阻止“默认行为”

});

 3. 遮挡

由于 click 事件的滞后性，在这段时间内原来点击的元素消失了，于是便“穿透”了。因此我们顺着这个思路就想到，可以给元素的消失做一个fade效果，类似jQuery里的fadeOut，并设置动画duration大于300ms，这样当延迟的 click 触发时，就不会“穿透”到下方的元素了。

同样的道理，不用延时动画，我们还可以动态地在触摸位置生成一个透明的元素，这样当上层元素消失而延迟的click来到时，它点击到的是那个透明的元素，也不会“穿透”到底下。在一定的timeout后再将生成的透明元素移除。

4.pointer-events

pointer-events是CSS3中的属性，它有很多取值，有用的主要是auto和none，其他属性值为SVG服务。

auto：    效果和没有定义 pointer-events 属性相同，鼠标不会穿透当前层。

none：   元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。

5.只用touch

最简单的解决方案，完美解决点击穿透问题

把页面内所有click全部换成touch事件（ touchstart 、’touchend’、’tap’），需要特别注意 a标签，a标签的href也是click，需要去掉换成js控制的跳转，或者直接改成span + tap控制跳转。如果要求不高，不在乎滑走或者滑进来触发事件的话，span + touchend就可以了，毕竟tap需要引入第三方库

不用a标签其实没什么，移动app开发不用考虑SEO，即便用了a标签，一般也会去掉所有默认样式，不如直接用span

 

tap事件的原理:

tap事件的原理其实是源于触摸touch事件,在移动触摸事件就是在同个点触发,及touchmove的距离距离touchstar的距离为0,并且点击的时间不超过某个设定的时间值,超过该时间值的话,就属于长按了

下面我封装了一个事件,模拟tap事件的原理:

封装tap的方法

    function tap(ele,callBack){

        //触摸开始的时间

        var startTime=0;

        //定义touchmove是否触发

        var ismove=false;

        var maxTime=250;

        ele.addEventListener('touchstart',function(e){

            startTime=Date.now();

            ismove=false;

        })

        ele.addEventListener('touchmove',function(e){

            //触发就赋值为true

            ismove=true;

        })

        ele.addEventListener('touchend',function(e){

            //判断是否是touchmove是否触发

            if (ismove) {

                return;

            }

            // 判断是否为长按

            if ((Date.now()-startTime)>maxTime) {

                return;

            }

 

        // 如果能够到这里

        callBack(e);

        })

   

    }

 

移动端模拟双击事件 

var  clicked = 1;

var  clickedTime={

        'timeA':" ",

       'timeB':" "

 };

var clicking=function()

{

           if(clicked==1){

              clickedTime.timeA=new Date();

              clicked++;             

          }

          else if(clicked==2){

            clickedTime.timeB=new Date();

            if (Math.abs(clickedTime.timeA-clickedTime.timeB)<400){

               //  双击 function

                clicked=1;

            }else{

              clickedTime.timeA=new Date();

            };

          }

      });

 

移动端  单击事件 与 双击事件 共存 如(单击 则function a() 双击function B())

var  clicked = 1;

var  clickedTime={

        'timeA':" ",

       'timeB':" "

 };

var clicking=function()

{

          if(clicked==1){

             // 单击 function

            clicked++; 

          }

          else if(clicked==2){

              clickedTime.timeA=new Date();

              clicked++;             

          }

          else if(clicked==3){

            clickedTime.timeB=new Date();

            if (Math.abs(clickedTime.timeA-clickedTime.timeB)<400){

               //  双击 function

                clicked=1;

            }else{

              clickedTime.timeA=new Date();

            };

          }

      });