1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
  6.     <meta content="yes" name="apple-mobile-web-app-capable">
  7.     <meta content="black" name="apple-mobile-web-app-status-bar-style">
  8.     <meta content="telephone=no" name="format-detection">
  9.     <meta content="email=no" name="format-detection">
  10.     <style type="text/css">
  11.         a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
  12.         .btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
  13.         .btn-blue-on{background-color: #357AE8;}
  14.     </style>
  15. </head>
  16. <body>
  17.  
  18. <div class="btn-blue">按钮</div>
  19.  
  20. <script type="text/javascript">
  21.     var btnBlue = document.querySelector(".btn-blue");
  22.     btnBlue.ontouchstart = function(){
  23.         this.className = "btn-blue btn-blue-on"
  24.     }
  25.     btnBlue.ontouchend = function(){
  26.         this.className = "btn-blue"
  27.     }
  28. </script>
  29. </body>
  30. </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. angular.js初探

    2015年7月27日 22:26:35 星期一 用在我论坛里的小栗子: 先列出来一级回帖, 点击帖子前边的"查看回复"按钮无刷新的去请求该帖子的所有回复 首先要引用js文件, 我这 ...

  2. Kafka集群环境搭建

    Kafka是一个分布式.可分区.可复制的消息系统.Kafka将消息以topic为单位进行归纳:Kafka发布消息的程序称为producer,也叫生产者:Kafka预订topics并消费消息的程序称为c ...

  3. ffmpeg-20160325-snapshot-static-bin

    ffmpeg-20160325-snapshot-static.7z ./configure \ --enable-static \ --disable-shared \ --enable-gpl \ ...

  4. iOS SHA1加密实现方法

    使用方法 先导入头文件 #import "SHA1.h" //SHA1测试 NSString* sh1=[SHA1 getSha1String:"]; NSLog(@&q ...

  5. pthread_cond_wait的原子性

    使用的基本模板如下(参考APUE): signal代码序列如下, pthread_mutex_lock ... pthread_cond_signal pthread_mutex_unlock   w ...

  6. UIScrollView控件实现图片缩放功能

    转发自:http://www.cnblogs.com/wendingding/p/3754268.html 一.缩放 1.简单说明: 有些时候,我们可能要对某些内容进行手势缩放,如下图所示 UIScr ...

  7. DOM动画效果基础入门

    一.什么是DOM? Document Object Model文档对象模型 当创建一个网页并把它加载到web浏览器中时,如果没有document(文档): DOM根据你编写的网页文档创建一个文档对象 ...

  8. python基础——模块

    python基础——模块 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文 ...

  9. Clr Via C#读书笔记---垃圾回收机制

    #1 垃圾回收平台的基本工作原理: 访问一个资源所需的具体步骤: 1)调用IL指令newobj,为代表资源的类型分配内存.在C#中使用new操作符,编译器就会自动生成该指令.2)初始化内存,设置资源的 ...

  10. jQuery学习笔记---兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...