<!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. TransactionScope类

    命名空间:System.Transactons MSDN解释:使代码块成为事务性代码,此类不能被继承. 百度空间:在项目中引用using System.Transaction命名空间.在using 中 ...

  2. [转]Android下拉刷新完全解析，教你如何一分钟实现下拉刷新功能

    版权声明:本文出自郭霖的博客,转载必须注明出处. 转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/9255575 最近项目中需要用到L ...

  3. 【leetcode】Integer to Roman & Roman to Integer（easy）

    Roman to Integer Given a roman numeral, convert it to an integer. Input is guaranteed to be within t ...

  4. 20145213《Java程序设计》实验报告一：Java开发环境的熟悉（Windows+IDEA）

    20145213<Java程序设计>实验报告一:Java开发环境的熟悉(Windows+IDEA) 实验要求 使用JDK编译.运行简单的Java程序. 使用IDEA编辑.编译.运行.调试J ...

  5. 安装oracleASM

    问题:oracleasm status不能启动 解决方案: [root@localhost ~]# oracleasm statusChecking if ASM is loaded: noCheck ...

  6. library not found for -lAFNetworking

    错误内容如图所示: error:linker command failed with exit code 1(use -v to see invocation) 首先报这个错的情况有很多,所以需要看e ...

  7. 解决window删除文件时提示: 源文件名长度大于系统支持的长度

    import java.io.File; /** */ public class DeleteFiles { public static void deleteFiles( File file ){ ...

  8. 四、优化及调试--网站优化--Yahoo军规下

    21.根据域名划分页面内容 很显然, 是最大限度地实现平行下载 22.尽量减少iframe的个数 考虑即使内容为空,加载也需要时间,会阻止页面加载,没有语意,注意iframe相对于其他DOM元素高出1 ...

  9. iOS 判断第一个字符是数字还是汉字

       NSString *titleStr = @"琳小兮";  //先截取字符串,拿到第一个字符         NSString *firstStr = [titleStr s ...

  10. tableView 局部刷新

    //一个section刷新 NSIndexSet *indexSet=[[NSIndexSet alloc]initWithIndex:2]; [tableview reloadSections:in ...