300ms点击延迟问题
造成原因：双击缩放问题，即判断点击事件使单击还是双击
解决方案：
1.禁用缩放
HTML头部标签 meta1
2<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">
缺点：完全禁用了缩放，即使双指缩放也被禁止。
2.更改默认的视口宽度
为了使桌面站点在浏览器中正常显示，移动端浏览器视口宽度要比设备浏览器视口宽度大，通常为980px
通常通过标签设置视口宽度为设备宽度1
<meta name="viewport" content="width=device-width">
只是禁用了浏览器默认的双击缩放行为，用户可以进行双指缩放。
3.CSS 的 touch-action
touch-action 属性决定是否触摸操作会触发用户代理的默认行为。包括但不限于双指缩放。
默认值为 auto，设置为 none 即可以移除目标元素的300ms 延迟
可以在 <body> 元素上设置 touch-action: none，这就彻底禁用了双击缩放(注：这也同时禁用了双指缩放)。
缺点：只有IE实现了指针事件。不适用于其他浏览器(后期逐步支持)。
基于JavaScript的跨平台解决方案
4.针对指针事件的 polyfill
指针事件的 polyfill:
- Google 的 Polymer
- 微软的 HandJS
- @Rich-Harris 的 Points
polyfill在非IE浏览器中模拟touch-action属性。
一种方案是JS去请求解析所有的样式表，另一种方案是将touch-action作为html标签的属性。
5.快速点击(FastClick)
一个解决300ms延迟问题的轻量级库。
具体方法：FastClick 在检测到 touchend 事件的时候，会通过 DOM 自定义事件立即触发一个模拟 click 事件，并把浏览器在 300 毫秒之后真正触发的 click 事件阻止掉。
使用方法：在 window load 事件之后，在 <body> 上调用FastClick.attach() 即可。
点击穿透问题
造成原因：页面两个元素A和B，B元素在A元素之上，在B元素的 touchstart 事件上绑定回调函数，该回调函数作用为隐藏B元素。点击B元素时候，B元素隐藏，A元素触发了 click 事件。如果A元素是一个链接将会直接跳转。
原因：移动端浏览器中，事件执行顺序为 touchstart->touchmove->touchend->click.
解决方案：
- 只使用click事件或者tap事件或者touch事件;
- 在click事件触发之前阻止。如在touchend事件中使用e.preventDefault()阻止后续click事件;
- tap后延迟350ms之后再隐藏mask
如有错误，烦请指正，谢谢！
