:active in mobile
2017-09-11 本文已影响0人
老虎爱吃母鸡
overview
因为在移动端，我们没有hover的状态，但是往往我们需要对用户的点击作出反馈，让用户知道自己点击到了按钮
resolve
解决方案其实就是使用:active伪类，但是使用:active有几个注意事项
IOS中，:active状态只在touch event设置后才触发
On iOS, mouse events are sent so quickly that the down or active state is never received.
在 Safari Developer Library的Highlighting Elements部分最后有提到，因为mouse事件发送太快，所以active不会被接收到
解决方式就是显示设置touchstart事件，告诉浏览器去相应这个事件，可以直接写在body上
<body ontouchstart="">
...
</body>
也可以在直接在入口script文件设置
document.addEventListener('touchstart', function () {} )
button按钮存在默认反馈状态
IOS中的button按钮在默认情况下已经有了反馈的状态，表现为一层灰色遮罩，在移动端的safari点击会触发
解决方法是使用私有属性把遮罩设置为透明
html {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
