解决js点击click事件在iOS设备上事件延时闪烁的问题

闪烁问题

由于在iOS Safari上click事件存在300ms响应延时，所以为touch事件添加样式，会和click事件默认样式叠加而产生闪烁问题。

因为ios safari浏览器中对触摸事件的响应顺序是：

ontouchstart -> ontouchmove -> ontouchend -> (300ms) onclick

快速解决问题的方法：

消除click默认样式

通过讲click事件样式的alpha通道设置为0（透明），消除click事件的闪烁效果

-webkit-user-select: none;-webkit-tap-highlight-color: rgba(0,0,0,0);

如果是父级闪烁，那么需要给父级元素加上-webkit-tap-highlight-color: rgba(0,0,0,0);


此时，浏览器默认的click事件样式就看不到了，但是延时仍然存在。

消除click延时
FastClick 是FT Labs专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。简而言之，FastClick 在检测到 touchend 事件的时候，会通过 DOM 自定义事件立即触发一个模拟 click 事件，并把浏览器在 300 毫秒之后真正触发的click事件阻止掉。

FastClick 非常实际地解决 300 毫秒点击延迟的问题，唯一的缺点可能也就是该脚本的文件尺寸 (尽管它只有10kb)。如果你连这10kb都接受不了的话，那么移动端类库 jQuery和zepto.js都支持tap事件来解决这个问题，尽管它们的响应速度比FastClick慢一些。

转自：http://www.jianshu.com/p/0650b23f9536