移动端按钮效果

2017-08-02

h5开发webapp各种按钮,为了更友好地展示交互效果,需要添加一些点击效果,在pc端的元素用:focushover:active等伪元素来实现,超链接元素还有:link:visited

很重要的一点是,由于css的规则,优先级相同的样式后面会覆盖前面的,所以伪类顺序很重要,一般是

(:link或者:visited) ~ :focus ~ :hover ~ :active

safari和chorme会有突出颜色显示,可以用-webkit-tap-highlight-color来取消

.btn {
	-webkit-tap-highlight-color: transparent;
}

windows phone的ie可以用meta标签来实现触摸取消这种效果

<meta name="msapplication-tap-highlight" content="no">

火狐有一个-moz-focus-inner伪类,在触摸元素添加一个轮廓,可以设置border: 0移除

在button元素会对元素应用渐变,可以通过background-image: none移除

.btn {
  background-image: none;
}

.btn::-moz-focus-inner {
  border: 0;
}

在移动端的浏览器上,android的按下效果可以用:active或者:hover伪元素来实现,而在ios上,可以通过js为元素添加touchstart事件来解决这个问题

window.onload = function() {
  if(/iP(hone|ad)/.test(window.navigator.userAgent)) {
    document.body.addEventListener('touchstart', function() {}, false);
  }
};

替代方案是向页面中的所有可交互元素添加触摸开始侦听器,从而缓解部分性能问题。

window.onload = function() {
  if(/iP(hone|ad)/.test(window.navigator.userAgent)) {
    var elements = document.querySelectorAll('button');
    var emptyFunction = function() {};
    for(var i = 0; i < elements.length; i++) {
      elements[i].addEventListener('touchstart', emptyFunction, false);
    }
  }
};

 

本文为原创,未经授权,禁止任何媒体或个人自媒体转载
商业侵权必究,如需授权请联系340443366@qq.com
标签: javascript css3 html5

评论

Loading...

最新评论

相关推荐

css sticky失效原因调研
css sticky定义 position:sticky 定义元素为粘性定位元素,根据正常文档流进行定位,然后相对它的...
前端登录凭证存储方案
现在是前后端分离时代,接口登录凭证通常使用cookie,session,web storage来实现,三种方法区别可以阅...
前端渲染优化-css资源加载
在日常网站开发中,我们会使用link来加载外部的css样式文件,然而css的加载会阻塞页面的渲染,直到资源加载完成并等待...
scroll-top-icon