:active in mobile

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);
}

reference

Safari Developer Library

:active pseudo-class doesn't work in mobile safari

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容