active：移动端触摸按钮的效果。

最新推荐文章于 2022-12-16 19:38:36 发布

weixin_30588827

最新推荐文章于 2022-12-16 19:38:36 发布

阅读量262

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/doomjx/p/5772953.html

版权

移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个很好的用户体验。

但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，这个时候我们就可以激活移动端css的active效果。

方法很简单：在body上添加ontouchstart，即可激活移动端css的active效果；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style type="text/css">
a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
.btn-blue:active{background-color: #357AE8;}
</style>
</head>
<body ontouchstart>
<div class="btn-blue">按钮</div>

</body>
</html>

如果想要做到全兼容，可以通过绑定ontouchstart和ontouchend来控制按钮的类名；　

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style type="text/css">
a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
.btn-blue-on{background-color: #357AE8;}
</style>
</head>
<body>

<div class="btn-blue">按钮</div>

<script type="text/javascript">
var btnBlue = document.querySelector(".btn-blue");
btnBlue.ontouchstart = function(){
    this.className = "btn-blue btn-blue-on"
}
btnBlue.ontouchend = function(){
    this.className = "btn-blue"
}
</script>
</body>
</html>

--任何组织或个人分享、转载本博客内容，请务必以链接方式注明出处：来自博客园--下雨天的太阳（http://www.cnblogs.com/doomjx/）--
--请勿以任何形式修改内容（包括文字和图片）--

转载于:https://www.cnblogs.com/doomjx/p/5772953.html