关于IOS300ms点击延迟的解决方案

起因

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

一些解决方案

1.禁止放大缩小

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

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

or

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一段距离，就认为是在滑动