fastClick入坑爬坑详解

来源：互联网发布：微信小视频修改软件编辑：程序博客网时间：2024/06/07 07:23

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.不过仍然存在可容忍范围内的延迟.

0 0