safari浏览器click事件要点击两次才有响应出现闪烁

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

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

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

快速解决问题的方法：

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

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

消除click延时

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

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

iOS端click事件响应延时（300ms）的缘由

2007 年初。苹果公司在发布首款 iPhone 前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。因而苹果的工程师们作了一些约定，应对 iPhone 这种小屏幕浏览桌面端站点的问题。 这当中最出名的，当属双击缩放(double tap to zoom)，这也是会有上述 300 毫秒延迟的主要缘由。双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。




那么这和 300 毫秒延迟有什么联系呢？ 假定这么一个场景。用户在 iOS Safari 里边点击了一个连接。因为用户能够进行双击缩放或者双击滚动的操做，当用户一次点击屏幕以后，浏览器并不能马上判断用户是确实要打开这个连接，仍是想要进行双击操做。所以，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。 鉴于iPhone的成功，其余移动浏览器都复制了 iPhone Safari 浏览器的多数约定，包括双击缩放，几乎如今全部的移动端浏览器都有这个功能。

以前人们刚刚接触移动端的页面，在欣喜的时候每每不会care这个300ms的延时问题，但是现在touch端界面如雨后春笋，用户对体验的要求也更高，这300ms带来的卡顿慢慢变得让人难以接受。

fastclick

详情参考文档