ontouchstart

<!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>

其实可以用active，考虑要做到全兼容，故而用了通过绑定ontouchstart和ontouchend来控制按钮的类名。

相关文章