Fastclick消除iPhone的300ms点击延迟

使用Fastclick消除iPhone网页300ms点击延迟

      做了一段时间的移动端网页工作，发现iPhone手机打开网页之后，点击事件有些延迟。上网一查，iPhone打开的网页，click事件有大概300ms的延迟，这是因为系统好像为了判断是否是双击事件，安卓手机基本没有这个问题（如果有的话，可以给我留言讨论）。

      之后想要使用touchstart事件等，但是网上说会导致些许问题，于是找到了Fastclick这个js库，使用这个库可以去掉click事件的300ms延迟。下面介绍这个库的使用和一些实际使用问题。

GitHub地址:

https://github.com/ftlabs/fastclick

导入js文件之后，在script标签里写:

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

如果使用jQuery:

$(function() {
    // 在ready里面加入下面这句话
    FastClick.attach(document.body);
});

这个document.body填的是js的一个dom对象，默认是body，当然我们可以选择一块区域消除300ms延迟。为什么要这么做呢？

如果使用Fastclick会导致一些问题。例如:

document.querySelector('#fileUpload').click()

不会触发点击事件。那么问题来了，上面这句代码是什么意思？

这句代码是图片上传模块的一句代码。这个图片上传模块为了美化界面，将隐藏，然后写了个按钮，点击按钮触发上面这句话，实现点击按钮=点击input的功能。

这样我们可以选择一些dom区域，然后消除300ms延迟。FastClick.attach(document.body)这句代码可以写多次。