:active状态

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

activeMotion

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

active1

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

手机添加:active状态

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

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

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

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

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

现在再看看效果:

active2

我测试了一下,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样式。而我们想要的效果是,只在用户真正去点击它的时候触发。