<!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来控制按钮的类名。

ontouchstart的更多相关文章

  1. 移动端 触摸事件 ontouchstart、ontouchmove、ontouchend、ontouchcancel

    1.Touch事件简介 pc上的web页面鼠 标会产生onmousedown.onmouseup.onmouseout.onmouseover.onmousemove的事件,但是在移动终端如 ipho ...

  2. 讲解ontouchstart、ontouchend、onclick区别和坑点

    今天要讲的这个并不复杂,我用一个例子来讲解吧 <div id="box"></div> var box = document.querySelector(& ...

  3. 移动端 触摸事件 ontouchstart、ontouchmove、ontouchend、ontouchcancel[转]

    转:http://www.cnblogs.com/irelands/p/3433628.html 1.Touch事件简介pc上的web页面鼠 标会产生onmousedown.onmouseup.onm ...

  4. body标签添加ontouchstart属性

    之前看别人的代码,发现他的body标签添加ontouchstart属性.即 <body ontouchstart> 上网查了一下原因,记录一下: 这个操作是进行手机端兼容处理的,防止伪类: ...

  5. ontouchstart ondragstart="return false" oncopy="return false;" oncut="return false onselectstart="return false" onpaste="return false"

    ontouchstart:  开始触屏事件. ondragstart="return false"  禁止拖拽 oncopy="return false" 禁止 ...

  6. jquery如何获取手机网页触屏坐标：ontouchstart 、ontouchend、ontouchmove

    function handleTouchEvent(event) { //只跟踪一次触摸 ) { var output = document.getElementById("output&q ...

  7. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  8. FastClick 填坑及源码解析

    最近产品妹子提出了一个体验issue —— 用 iOS 在手Q阅读书友交流区发表书评时,光标点击总是不好定位到正确的位置: 如上图,具体表现是较快点击时,光标总会跳到 textarea 内容的尾部.只 ...

  9. (转)倾力总结40条常见的移动端Web页面问题解决方案

    原文链接:戳这里 1.安卓浏览器看背景图片,有些设备会模糊.   用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太 ...

随机推荐

  1. SQL Update 巧用

    JOIN 样本 ********************************** Update 结存 set 结存.现有库存=c.入仓数-b.出仓数量 from 结存 a )) 入仓数 from ...

  2. Effective C++ -----条款24：若所有参数皆需类型转换，请为此采用non-member函数

    如果你需要为某个函数的所有参数(包括被this指针所指的那个隐喻参数)进行类型转换,那么这个函数必须是个non-member.

  3. noip2016复习

    明天的复习任务 矩阵乘法 优先队列(老忘记怎么打) 二分图 K短路 单调队列(还是不太明白各种顺序) 扩展欧几里得 费马小定理求素数 哎呀,列了这么多,任重而道远啊-- 今夕是何夕,晚风过花庭-- 故 ...

  4. chaper3_exercise_Uva1585_score

    #include<iostream> #include<string> using namespace std; int main(void) { , j = ; string ...

  5. BigInteger类型的解析_超详细解析

    /*9876543210987654234522345 214748364723453452323452345 2147483647234523452323452345 181760911432744 ...

  6. Mysql之高可用

    使用缓存Memcache, 1,可使用Hash算法由客户端决定路由到哪个Memcache服务器上:客户端完全不用关心数据存储在哪个Memcache服务器上:完全隔离了客户端与服务端:由于是Hash,在 ...

  7. 再来一发！DB2 应用程序如何从数据库取数据 Fetch

    The FETCH statement positions a cursor on the next row of its result table and assigns the values of ...

  8. Javascript和Java获取各种form表单信息的简单实例

    大家都知道我们在提交form的时候用了多种input表单.可是不是每一种input表单都是很简单的用Document.getElementById的方式就可以获取到的.有一些组合的form类似于che ...

  9. 在python3.5下安装scrapy包

    此前scrapy只支持python2.x 但是最新的1.1.0rc1已结开始支持py3了 如果电脑上安装了scrapy的依赖包,诸如lxml.OpenSSL 1.你直接下载Scrapy-1.1.0rc ...

  10. wifi参考网站

    1.Wireless LAN resources for Linux http://www.hpl.hp.com/personal/Jean_Tourrilhes/Linux/Wireless.htm ...