fastClick入坑爬坑详解

fastClick入坑爬坑详解

公司之前要上线一个移动支付项目,主要页面如下:
问题来了,移动端click事件一般至少有300ms的延迟,如果输入频率不高,完全可以忽视这个问题;
但是,变态的测试要求跟原生效果一样(当时我心里是懵逼的,因为完全没搞过啊).
老板逼得紧,强行上呗(公司就我一个前端).
搞完后的情况是:
借用领导一句话,安卓如丝般顺滑,iPhone卡成翔.当时测试那边简直是想要搞事啊,分分钟就要来个自爆.
好吧,想办法解决呗.就找到了fastclick.js.具体使用如下:

function NoClickDelay(el) {
    this.element = typeof el == 'object' ? el: document.getElementById(el);       
    if (window.Touch)  this.element.addEventListener('touchstart', this, false);
}
NoClickDelay.prototype = {
    handleEvent: function(e) {               
        switch (e.type) {                       
        case 'touchstart':
            this.onTouchStart(e);
            break;                       
        case 'touchmove':
            this.onTouchMove(e);
            break;                       
        case 'touchend':
            this.onTouchEnd(e);
            break;
        }       
    },
    onTouchStart: function(e) {
        e.preventDefault(); this.moved = false;
        this.theTarget = document.elementFromPoint(e.targetTouches[0].clientX, e.targetTouches[0].clientY);               
        if (this.theTarget.nodeType == 3) this.theTarget = theTarget.parentNode;
        this.theTarget.className += ' pressed';
        this.element.addEventListener('touchmove', this, false);
        this.element.addEventListener('touchend', this, false);       
    },
    onTouchMove: function(e) {
        this.moved = true;
        this.theTarget.className = this.theTarget.className.replace(/ ?pressed/gi, '');       
    },
    onTouchEnd: function(e) {
        this.element.removeEventListener('touchmove', this, false);
        this.element.removeEventListener('touchend', this, false);                     
        if (!this.moved && this.theTarget) {
            this.theTarget.className = this.theTarget.className.replace(/ ?pressed/gi, '');                        
            var theEvent = document.createEvent('MouseEvents');
            theEvent.initEvent('click', true, true);
            this.theTarget.dispatchEvent(theEvent);                
        }
        this.theTarget = undefined;       
    }
};

再调用NoClickDelay这个方法

window.addEventListener('load', function() {
                FastClick.attach(document.body);
            });
            new NoClickDelay(document.getElementById('el'));

    FastClick.attach(document.body);
    这里面的document.body是要做无延迟点击的区域
    NoClickDelay里面的元素ID就是该区域ID.然后在这个区域内正常写点击事件,如下:

ele.addEventListener('click',handler, true);

    看官请注意:金额数字非法或为0肯定要有提示是吧,坑就出在这儿了.不知道各位看官对JS自带的alert函数了解多少.  
    最近书看多了才知道,alert会中止当前JS进程,注意是'中止'而不是'终止'.如果没有其他事件触发,  
    页面会停止在当前状态,保持不变.而fastclick是要求我们一套大保健全部走完,才会给出我们想要的结果
    异常中止的后果就是:
    在我们看来,alert就表示当前操作已经完成,
    但是fastclick认为你流程没有走完,反馈给我们的实际结果就是类似于'继承(当前按钮继承上一个被中止按钮)'.
    实际上fastclick是认为alert完事后的下一次点击操作用来弥补被中止流程的下半段.
    再下一次才是正常点击事件.
    至于我为什么要用alert,因为简单粗暴,完全没考虑过后果.
    当时不知道为什么会出现这个问题,也就无法解决.
    最终上线版本,还是用的触摸事件:touchStart和touchEnd.同样,给出一个区域,在上面绑定touchStart事件,给单个按钮绑定touchEnd.不过仍然存在可容忍范围内的延迟.