前些日子在做移动端的开发，早就听闻移动端有300ms点击延迟这一个问题，于是上找库解决。出于好奇心拜读了一下FastClick库的源码，终于搞明白他解决问题的原理。

本文只做代码解析，如果对为什么有延迟等有疑问可以看一下我的另一篇文章 http://www.jianshu.com/p/9cca518fa87b

1.FastClick解决的问题

移除移动端点击(click)事件300ms的延迟

2.FastClick结构

源码是一个单js文件，一共800+的行数，支持amd，cmd和script直接引入。

;(function () {
  // FastClick 构造函数 用来初始化并进行事件绑定
  function FastClick(layer, options){……}
  // 一些判断浏览器环境的代码
  ……
  // 为FastClick类添加各种原型方法
  // 判断是否需要原生点击
  FastClick.prototype.needsClick = function(target) {……}
  // 判断是否需要聚焦
  FastClick.prototype.needsFocus = function(target){……}
  // 向具体元素发送点击事件
  FastClick.prototype.sendClick = function(targetElement, event){……}
  // 决定事件类型
  FastClick.prototype.determineEventType = function(targetElement){……}
  // 检查目标是否是滚动元素的子元素
  FastClick.prototype.updateScrollParent = function(targetElement){……}
  // 获取点击作用的目标
  FastClick.prototype.updateScrollParent = function(targetElement){……}
  // 为触摸事件绑定回调函数
  FastClick.prototype.onTouchStart = function(event){……}
  FastClick.prototype.touchHasMoved = function(event){……}
  FastClick.prototype.onTouchMove = function(event){……}
  FastClick.prototype.onTouchEnd = function(event){……}
  FastClick.prototype.onTouchCancel = function(){……}
  // 获取label对应的表单
  FastClick.prototype.findControl = function(labelElement){……}
  // 为未能取消的事件加保险
  FastClick.prototype.onMouse = function(event){……}
  // 点击事件回调函数
  FastClick.prototype.onClick = function(event){……}
  // 移除所有回调函数
  FastClick.prototype.destroy = function(){……}
  // 判断是否需要FastClick
  FastClick.notNeeded = function(layer){……}
  // 静态工厂方法 暴露接口供使用者调用
  FastClick.attach = function(layer, options){……}
  // 模块加载适配
  if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
        // AMD. Register as an anonymous module.
        define(function() {
            return FastClick;
        });
    } else if (typeof module !== 'undefined' && module.exports) {
        module.exports = FastClick.attach;
        module.exports.FastClick = FastClick;
    } else {
        window.FastClick = FastClick;
    }
})()

可以看出，FastClick的源代码的结构是非常清晰的。定义了一个FastClick的构造函数，为其原型添加共用的方法，之后添加了静态方法。我们接下来一步一步来剖析源码。

3.源码解析

从官网的说明来看，我们需要这样在项目中引入FastClick

if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}

那么我们的入口就是FastClick.attach这个函数

FastClick.attach = function(layer, options) {
    return new FastClick(layer, options);
};

可以看出这个静态方法就是一个工厂函数，用来创建并返回一个FastClick实例，自然我们看一下FastClick这个构造函数。

function FastClick(layer, options) {
        var oldOnClick;
        // 一些参数的定义
        options = options || {};

        /**
         * Whether a click is currently being tracked.
         *
         * @type boolean
         */
        this.trackingClick = false;


        /**
         * Timestamp for when click tracking started.
         *
         * @type number
         */
        this.trackingClickStart = 0;


        /**
         * The element being tracked for a click.
         *
         * @type EventTarget
         */
        this.targetElement = null;


        /**
         * X-coordinate of touch start event.
         *
         * @type number
         */
        this.touchStartX = 0;


        /**
         * Y-coordinate of touch start event.
         *
         * @type number
         */
        this.touchStartY = 0;


        /**
         * ID of the last touch, retrieved from Touch.identifier.
         *
         * @type number
         */
        this.lastTouchIdentifier = 0;

        /**
         * Touchmove boundary, beyond which a click will be cancelled.
         *
         * @type number
         */
        this.touchBoundary = options.touchBoundary || 10;


        /**
         * The FastClick layer.
         *
         * @type Element
         */
        this.layer = layer;

        /**
         * The minimum time between tap(touchstart and touchend) events
         *
         * @type number
         */
        this.tapDelay = options.tapDelay || 200;

        /**
         * The maximum time for a tap
         *
         * @type number
         */
        this.tapTimeout = options.tapTimeout || 700;

        if (FastClick.notNeeded(layer)) {
            return;
        }

        // Some old versions of Android don't have Function.prototype.bind
        function bind(method, context) {
            return function() { return method.apply(context, arguments); };
        }
        //  为函数绑定上下文
        var methods = ['onMouse', 'onClick', 'onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'];
        var context = this;
        for (var i = 0, l = methods.length; i < l; i++) {
            context[methods[i]] = bind(context[methods[i]], context);
        }

        // Set up event handlers as required
        if (deviceIsAndroid) {
            layer.addEventListener('mouseover', this.onMouse, true);
            layer.addEventListener('mousedown', this.onMouse, true);
            layer.addEventListener('mouseup', this.onMouse, true);
        }
        // 绑定回调事件
        layer.addEventListener('click', this.onClick, true);
        layer.addEventListener('touchstart', this.onTouchStart, false);
        layer.addEventListener('touchmove', this.onTouchMove, false);
        layer.addEventListener('touchend', this.onTouchEnd, false);
        layer.addEventListener('touchcancel', this.onTouchCancel, false);

        // Hack is required for browsers that don't support Event#stopImmediatePropagation (e.g. Android 2)
        // which is how FastClick normally stops click events bubbling to callbacks registered on the FastClick
        // layer when they are cancelled.
        // 对stopImmediatePropagation做polyfill
        if (!Event.prototype.stopImmediatePropagation) {                               
            layer.removeEventListener = function(type, callback, capture) {
                var rmv = Node.prototype.removeEventListener;
                if (type === 'click') {
                    rmv.call(layer, type, callback.hijacked || callback, capture);
                } else {
                    rmv.call(layer, type, callback, capture);
                }
            };

            layer.addEventListener = function(type, callback, capture) {
                var adv = Node.prototype.addEventListener;
                if (type === 'click') {
                    adv.call(layer, type, callback.hijacked || (callback.hijacked = function(event) {
                        if (!event.propagationStopped) {
                            callback(event);
                        }
                    }), capture);
                } else {
                    adv.call(layer, type, callback, capture);
                }
            };
        }

        // If a handler is already declared in the element's onclick attribute, it will be fired before
        // FastClick's onClick handler. Fix this by pulling out the user-defined handler function and
        // adding it as listener.
        if (typeof layer.onclick === 'function') {

            // Android browser on at least 3.2 requires a new reference to the function in layer.onclick
            // - the old one won't work if passed to addEventListener directly.
            oldOnClick = layer.onclick;
            layer.addEventListener('click', function(event) {
                oldOnClick(event);
            }, false);
            layer.onclick = null;
        }
    }

看懂代码并不难，主要过程就是
1.定义了一些我们之后操作需要用到的变量，同时进行浏览器判断是否需要FastClick来支持取消300ms的延迟（因为有些设置天然没有，可以移步我开头的文章，在这里我不详细说明了）
2.为事件的回调函数绑定了FastClick实例
3.为点击和触摸事件绑定回调函数(最重要的一步)
4.为stopImmediatePropagation做polyfill
也就是说，通过创建实例来为传入的layer绑定回调事件来解决问题。下面一一来解析每个事件的回调函数

• touchstart

FastClick.prototype.onTouchStart = function(event) {
        var targetElement, touch, selection;

        if (event.targetTouches.length > 1) {
            return true;
        }

        targetElement = this.getTargetElementFromEventTarget(event.target);

        touch = event.targetTouches[0];
        // 对ios做一些兼容性处理
        if (deviceIsIOS) {
            selection = window.getSelection();
            // 处理是否为长按选中 
            if (selection.rangeCount && !selection.isCollapsed) {
                return true;
            }

            if (!deviceIsIOS4) {
                if (touch.identifier && touch.identifier === this.lastTouchIdentifier) {
                    event.preventDefault();
                    return false;
                }

                this.lastTouchIdentifier = touch.identifier;
                this.updateScrollParent(targetElement);
            }
        }
        //  追踪这个点击事件并记录一些信息
        this.trackingClick = true;
        this.trackingClickStart = event.timeStamp;
        this.targetElement = targetElement;

        this.touchStartX = touch.pageX;
        this.touchStartY = touch.pageY;
        // 如果两次点击时间差小于预设的时间差 则取消第二次点击
        if ((event.timeStamp - this.lastClickTime) < this.tapDelay) {
            event.preventDefault();
        }

        return true;
    };

在onTouchStart中我们主要记录了这次点击的一些信息，包括时间、位置、点击作用的元素。并处理了快速的双击要取消第二次点击的问题。

tips: 在touch事件中调用event.preventDefault() 是可以取消触发原生的click事件的 同理作用于focus事件 mouseup等。这也正是FastClick的原理之一。

• touchmove

FastClick.prototype.onTouchMove = function(event) {
        if (!this.trackingClick) {
            return true;
        }

        // If the touch has moved, cancel the click tracking
        if (this.targetElement !== this.getTargetElementFromEventTarget(event.target) || this.touchHasMoved(event)) {
            this.trackingClick = false;
            this.targetElement = null;
        }

        return true;
    };

onTouchMove主要是用来区分是否是一个点击还是滑动，如果是滑动就取消追踪这个click

• touchend

FastClick.prototype.onTouchEnd = function(event) {
        var forElement, trackingClickStart, targetTagName, scrollParent, touch, targetElement = this.targetElement;
        // 如果不存在追踪click直接返回
        if (!this.trackingClick) {
            return true;
        }
        // 取消第二次延迟 
        if ((event.timeStamp - this.lastClickTime) < this.tapDelay) {
            this.cancelNextClick = true;
            return true;
        }
        // touchend于touchstart的时间差太长应为选择事件
        if ((event.timeStamp - this.trackingClickStart) > this.tapTimeout) {
            return true;
        }

        this.cancelNextClick = false;

        this.lastClickTime = event.timeStamp;

        trackingClickStart = this.trackingClickStart;
        this.trackingClick = false;
        this.trackingClickStart = 0;

        if (deviceIsIOSWithBadTarget) {
            touch = event.changedTouches[0];

            targetElement = document.elementFromPoint(touch.pageX - window.pageXOffset, touch.pageY - window.pageYOffset) || targetElement;
            targetElement.fastClickScrollParent = this.targetElement.fastClickScrollParent;
        }

        targetTagName = targetElement.tagName.toLowerCase();
        // ******重点******
        // 如果点击的是一个label 则需要聚焦到label for的元素
        if (targetTagName === 'label') {
            forElement = this.findControl(targetElement);
            if (forElement) {
                this.focus(targetElement);
                if (deviceIsAndroid) {
                    return false;
                }

                targetElement = forElement;
            }
        } else if (this.needsFocus(targetElement)) {
            // 如果是一个需要focus的元素，则聚焦他并模拟一个点击事件
            if ((event.timeStamp - trackingClickStart) > 100 || (deviceIsIOS && window.top !== window && targetTagName === 'input')) {
                this.targetElement = null;
                return false;
            }
            
            this.focus(targetElement);
            this.sendClick(targetElement, event);

            if (!deviceIsIOS || targetTagName !== 'select') {
                this.targetElement = null;
                event.preventDefault();
            }

            return false;
        }

        if (deviceIsIOS && !deviceIsIOS4) {
            scrollParent = targetElement.fastClickScrollParent;
            if (scrollParent && scrollParent.fastClickLastScrollTop !== scrollParent.scrollTop) {
                return true;
            }
        }
        // 如果元素需要点击事件 则阻止原生点击 并模拟一个点击事件
        if (!this.needsClick(targetElement)) {
            event.preventDefault();
            this.sendClick(targetElement, event);
        }

        return false;
    };

这里正是FastClick的精髓，取消原生点击事件并立马模拟一个点击事件来取消这300ms的延迟。
再来看这两个关键函数

FastClick.prototype.focus = function(targetElement) {
        var length;
        if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month' && targetElement.type !== 'email') {
            length = targetElement.value.length;
            targetElement.setSelectionRange(length, length);
        } else {
            targetElement.focus();
        }
    };

聚焦元素会调用原生的focus事件，但是这里面还是有一个小bug的，每次点击触发的时候这个focus的时候，在ios设备上会选择到已输入字符的最后，也就不是自己点击的那个位置。

    FastClick.prototype.sendClick = function(targetElement, event) {
        var clickEvent, touch;

        // On some Android devices activeElement needs to be blurred otherwise the synthetic click will have no effect (#24)
        if (document.activeElement && document.activeElement !== targetElement) {
            document.activeElement.blur();
        }

        touch = event.changedTouches[0];

        // 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);
    };

使用原生的方法模拟一个鼠标事件，并且通过dispatchEvent方法触发这个事件。

• touchcancel

    FastClick.prototype.onTouchCancel = function() {
        this.trackingClick = false;
        this.targetElement = null;
    };

onTouchCancel只是取消了追踪

• click

FastClick.prototype.onClick = function(event) {
        var permitted;

        if (this.trackingClick) {
            this.targetElement = null;
            this.trackingClick = false;
            return true;
        }

        if (event.target.type === 'submit' && event.detail === 0) {
            return true;
        }

        permitted = this.onMouse(event);

        if (!permitted) {
            this.targetElement = null;
        }

        return permitted;
    };

主要是针对于捕捉的点击事件使用prevent并没有取消掉原生点击事件的问题

• mouse

FastClick.prototype.onMouse = function(event) {
        if (!this.targetElement) {
            return true;
        }

        if (event.forwardedTouchEvent) {
            return true;
        }

        if (!event.cancelable) {
            return true;
        }
        if (!this.needsClick(this.targetElement) || this.cancelNextClick) {

            // Prevent any user-added listeners declared on FastClick element from being fired.
            if (event.stopImmediatePropagation) {
                event.stopImmediatePropagation();
            } else {

                // Part of the hack for browsers that don't support Event#stopImmediatePropagation (e.g. Android 2)
                event.propagationStopped = true;
            }

            // Cancel the event
            event.stopPropagation();
            event.preventDefault();

            return false;
        }
        return true;
    };

主要是理解一下stopImmediatePropagation这个方法，会阻止其相同层次绑定的其他事件的发生。

4.总结

源码中还有其他的一些函数，有兴趣可以自行翻阅一下，整体比较重要部分的分析已经写明了，其中对于各种兼容处理的代码并没有说明，感觉也并不是特别的重要，毕竟现在也没人去支持android2 3了吧，有兴趣也可以去读一读（毕竟没有设备也看不了效果啊）
源码还是挺好读懂的，也学到了关于移动端事件的一些知识，对于模拟事件并触发的机制也搞懂了，感觉收获还是挺大的，（虽然这个库现在用处也不是很大了，具体原因在文章头部的那篇文章里有写）
————————————————————————————
下一个目标：Axios（请求库）