<!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. 添加或修改ssh服务的端口

    通常ssh远程登录的默认端口是22,这个端口一般是可以更改或者添加的,配置文件位置在:/etc/ssh/sshd_config通过编辑文件可以修改sshd服务的相关配置,以下新增端口2223,即除了2 ...

  2. 【转】TextView长按复制实现方法小结

    有这么一个需求,用户在浏览文本信息时希望长按信息就能弹出复制的选项方便保存或者在别的页面使用这些信息.类似的, 就像长按WebView或者EditText的内容就自动弹出复制选项. 这里面主要是2个特 ...

  3. Lake Counting_深度搜索_递归

    Lake Counting Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 30414   Accepted: 15195 D ...

  4. hdu 1896.Stones 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1896 题目意思:给出 n 块石头的初始位置和能到达的距离.对于第奇数次遇到的石头才抛掷,偶数次的就忽略 ...

  5. 使用iScroll时，input等不能输入内容的解决方法

    做移动平台的应用,使用iscroll使屏幕上下滑动.发现当使用iscroll后,input等不能输入内容了.只要在iscroll.js文件中加入如下代码就ok了. function allowForm ...

  6. HTML中表格元素TABLE,TR,TD及属性的语法

    table:表格元素及属性 <table width="80%" border="1" cellspacing="1" cellpad ...

  7. iScroll.js 用法参考 （share）

    分享是传播.学习知识最好的方法 以下这篇文章是iScroll.js官网的中文翻译,尽管自己英文不好,但觉得原作者们翻译的这个资料还是可以的,基本用法介绍清楚了.如果你英文比较好的话,可以看看官网的资料 ...

  8. 【leetcode】Rotate List（middle）

    Given a list, rotate the list to the right by k places, where k is non-negative. For example:Given 1 ...

  9. 【XLL API 函数】xlGetBinaryName

    用于返回由 xlDefineBinaryName 函数定义的名称数据句柄.定义的名称和工作簿一起保存,我们可以在任意时间访问这个名称. 原型 Excel12(xlGetBinaryName, LPXL ...

  10. GridView如何合并同类项

    /// <summary>     /// 合并GridView中某列相同信息的行(单元格)     /// </summary>     /// <param name ...