给手机网页添加按下(:active)状态

:active状态

当我们给元素添加:active伪类时，电脑中当鼠标按下该元素的时会触发这个状态，但是在手机上却不会，比如下面这个例子：

电脑上，您可以直接点击二维码打开Demo，手机则扫描二维码进行访问：

上面的例子在电脑上有active状态是肯定的，但是手机访问却没有这个状态，并且还有一层半透明的层覆盖在上面，这种用户体验实在是太差了。

手机添加:active状态

首先，需要把链接在移动端上默认的一层半透明的层删掉，这个给所有的a标签添加一个：

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

现在在手机上点击链接就不会出现一个半透明的层盖在上面了。

想要让给元素添加的:active起作用，还需要给document绑定一个touchstart事件 ，而这个事件什么都不做，只是为了触发:active：

document.addEventListener("touchstart", function(){}, true);

现在再看看效果：

我测试了一下，Android设备中，自带浏览器、Chrome、QQ浏览器等都是有效果的，唯独UC不行！UC。。。UC！！~~~~

当然，iPhone中Safari也是有效果的。

结语

至于为什么给文档添加了touchstart事件后就可以让:active起作用，我也不知道呀！这个方法也不是我发明的，是前几天看老外写的一篇文章(链接不知道哪里去了，找到后发上来)，所以在此记录下来。

如果你明白其中的原理，请留言和大家分享一下吧！

以下内容添加于：2013.10.31

1.上面说到的那篇老外的文章已经找到：A Beginner’s Guide to Perceived Performance: 4 Ways to Make Your Mobile Site Feel Like a Native App

2.关于给document添加touchstart可以触发:active，网友：Ethan Lai 给出了这样的解释：

touch 事件的过程是 touchstart – touchmove – touchend, :active样式会在 touchstart的时候就触发，比如你按住某一个点拖动页面，此时这个点所在的元素就会触发:active样式。而我们想要的效果是，只在用户真正去点击它的时候触发。