Question

fastclick太敏感 怎么办

Answer 1

FastClick是FTLabs专门为解决移动端浏览器300毫秒点击延迟问题所开发的一个轻量级的库。简而言之，FastClick在检测到touchend事件的时候，会通过DOM自定义事件立即触发一个模拟click事件的click事件（自定义事件），并把浏览器在300毫秒之后真正触发的click事件阻止掉。FastClick非常实际地解决300毫秒点击延迟的问题。唯一的缺点可能也就是该脚本的文件尺寸(尽管它不大)。如果你非常在意这点文件大小，可以尝试一下FilamentGroup的Tappy!，或者tap.js。两者都相当轻量，能够通过监听tap而非click事件来绕过300毫秒延迟。当然，zepto库函数中，也有一个touch模块，此模块也包含tap事件，可以通过绑定tap来取代click事件。但是zepto的tap事件会有点透问题。如何解决，请看下篇分解。接下来，我们来详细了解一个问题：FastClick解决延迟点击的源码解析。FastClick解决延迟点击的源码解析。首先，我们来看FastClick的使用。window.addEventListener("load",function(){FastClick.attach(document.body);},false);这样就解决了300毫秒点击延迟的问题。FastClick的源码：FastClick.attach=function(layer){‘usestrict‘;returnnewFastClick(layer);};在FastClick的构造函数中，会有下面这段代码：this.onClick=function(){returnFastClick.prototype.onClick.apply(self,arguments);};this.onMouse=function(){returnFastClick.prototype.onMouse.apply(self,arguments);};this.onTouchStart=function(){returnFastClick.prototype.onTouchStart.apply(self,arguments);};this.onTouchEnd=function(){returnFastClick.prototype.onTouchEnd.apply(self,arguments);};this.onTouchCancel=function(){returnFastClick.prototype.onTouchCancel.apply(self,arguments);};if(FastClick.notNeeded(layer)){return;}if(this.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(‘touchend‘,this.onTouchEnd,false);layer.addEventListener(‘touchcancel‘,this.onTouchCancel,false);