移动页面【点击穿透】问题

      1. click事件与300s延迟 

    移动浏览器，用户触碰页面之后需等待一段时间来判断是不是（double Tap）动作，而不是立即响应单击（click），响应时间为300ms。

   移动事件提供了 touchstart、 touchmove、 touchend 却没有提供tap支持 ，主流框架（库）都是手动实现自定义tap事件来消除300ms延迟，提高页面响应速度。

   注意：简单页面，touchstart或touchmove可当做tap来用，但存在问题：手指接触目标元素，按住不放，慢慢移除响应区域，会触发touchstart事件执行对应的事件处理器（本不该触发。）， touchend 也存在类似问题。

     2.点击穿透问题

         1） 点击穿透 问题

                点击蒙层(mask)上的关闭按钮，蒙层消失后触发了按钮下面元素的click事件。

         2）跨页面点击穿透 问题

                按钮下面是href 属性的a标签，页面也会发生跳转，与上面相同原理。

         3）另一种跨页面点击穿透 问题

                没有mask，直接点击页内按钮跳转至新页，然后新页面对应元素的click事件被触         发。

   3.解决方案

        1）不要混用touch和click;

              既然touch之后300ms会触发click,只用touch或者只用click就自然不会存在问题。

             ①只用touch [简单完美]

                把所有click换成touch事件（touchstart,touchend,tap）

                注意：<a>标签的href也是click,需要去掉换成js控制的跳转；

                           或者直接改成span+tap 控制跳转，

                           如果要求不高，可以span+touchend就可以。

                          不用<a>标签其实没关系，移动app开发不用考虑SEO。

             ②只用click[不建议]

        2）消费掉touch之后的click。

              拿东西挡住；tap后延迟30ms再隐藏mask,pointe-revents;在下面元素的事件处理器里做检测（配合全局flag）等。

              ①拿东西挡住[蠢萌不建议]

              ②tap后延迟350ms再隐藏mask[省力]

                  优点：改动小，只改mask；

                  缺点：隐藏mask变慢

              ③pointer-event[麻烦不建议]

              ④在下面元素的事件处理器里做检测（配合全局flag）[麻烦不建议]

              ⑤fastclick[不如第一种]

                引入fastclick库；把页面所有touch换成click