解决ios下，点击延迟300ms的办法

在开发微信端时，发现在Android下面，click事件非常的流畅，而在IOS下却有一定的延迟。查了查资料，发现早在2007年，苹果为了解决在Iphone这种小屏幕浏览器站点的问题，就设置了300毫秒的延迟。
这是为了系统判断用户是双击还是单击屏幕。  网上面有很多的解决方案，推荐一个比较好用，而且也是非常稳定的方案 : fastclick.js  github  使用方法  在头部加入：
<script type="text/javascript" src="/js/mobile/fastclick.js"></script>

然后在页面加载时，使用
$(function() {
    FastClick.attach(document.body);
});

接下来试试看，会感觉click事件、input、textarea比使用前流畅了很多

起因

大多数移动端浏览器会在点击之后有一个300ms的延迟，因为用户可能会进行一些双击放大的操作，300ms可能有时候我们感觉不到，但是在一些应用中（比如网页游戏），我们可能需要它最好做到实时反应。


一些解决方案



我们可以禁止用户做那些缩放操作，这样我们就不用担心会有双击操作了。通过设置一下代码来实现（chrome & firefox）


<meta name="viewport" content="width=device-width, user-scalable=no">


or


<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">


这个方案目前在safari上还没有通过，显然 ，非常注重用户体验的苹果公司认为这对视力有限或存在运动障碍的用户很不用好，但是运营商已经在解决这个问题了。



2. 设置视口为设备的宽度(chrome32+)

当视口宽度设置为设备宽度或者小于设备宽度的时候，双击放大缩小就会被禁用。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3">


这项操作我们基本都会有，但是只有chrome32+的浏览器实现了，这也是一个非常简单的方法，相信firefox 、 opera 、safari、ie会跟进。


3. 使用PointerEvents（IE10+）

微软自己实现了对点击事件的封装，并有相关的规范， PointerEvents specification，里面考虑到了各种用户可能的点击场景，比如我们滑动页面浏览，就不会触发pointer up事件。

同时还有一个非官方的css属性：


a, button, .myelements
{
        -ms-touch-action: manipulation;        /* IE10  */
        touch-action: manipulation;                /* IE11+ */
}




4. 自己重新开发点击事件

自己封装自己的点击事件。比如说：

1. 取消点击。当我们点住后不松手，然后移动到另一个元素上再松开，这个操作就不触发点击事件。
2. 同样的点击后不松手，然后touchmove一段距离，就认为是在滑动。