300ms 延迟问题

300ms问题的由来

浏览器会等待300ms以确定用户是想单击还是双击。
最初是ios safari 为了解决手机端浏览pc网页时无法确定用户是单击还是双击缩放而设定了300ms等待这样一个约定，后来其他手机浏览器都复制了这个约定。但随着移动端web发展，对使用体验要求也越来越高，300ms的卡顿越来越难以接受。

目前的解决方案

归结起来是两个办法：
一、禁用双击缩放（meta 标签、touch-action都属于这类）
二、监听事件，不等300ms就触发，再移除300ms后的click事件（使用第三方库例如fastclick）
1.meta标签禁止缩放

<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">

2.浏览器会在视口宽度设置为设备宽度

<meta name="viewport" content="width=device-width">

时停用双击缩放行为，chrome 32开始支持，其他厂商也开始支持.
3.指针事件
touch-action属性规定了触摸输入能否触发UA的默认行为。

• auto:允许浏览器处理各类手势
• none:禁止浏览器处理各类手势
• manipulation: 允许平移，双指缩放，禁止双击缩放
  支持情况：

image.png

4.fastclick 见下文

React-fastclick

give up, 存在点透问题

fastclick

FastClick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers. The aim is to make your application feel less laggy and more responsive while avoiding any interference with your current logic.

原理：
移动端点击事件发生时，会触发touchStart => touchMove => touchEnd => click ，fastclick是在监听到touchEnd事件时，触发click事件，关键代码：

FastClick.prototype.onTouchEnd = function(event) {
    ...
    this.sendClick(targetElement, event);
    event.preventDefault();
    ...
};

FastClick.prototype.sendClick = function(targetElement, event) {
    var clickEvent, touch;
    ...
    // Synthesise a click event, with an extra attribute so it can be tracked
    clickEvent = document.createEvent('MouseEvents');
    clickEvent.initMouseEvent(this.determineEventType(targetElement), true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY,    false, false, false, false, 0, null);
    clickEvent.forwardedTouchEvent = true;
    targetElement.dispatchEvent(clickEvent);
};

引入：

import fastclick from 'fastclick';
fastclick.attach(document.body);

缺点：
文件大小：26k => 10k左右

Reference
1.http://www.jianshu.com/p/459102cd0ee9
2.https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action