<!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. mysql备份与还原

    一.直接拷贝数据库文件 直接拷贝数据库文件一般是使用文件系统备份工具cp,适合小型数据库,是最可靠的. 当你拷贝数据库文件时,必须保证表没有正在使用.如果服务器在你拷贝一个表的时候改变这个表,拷贝就失 ...

  2. 3.js模式-策略模式

    1. 策略模式 策略模式定义一系列的算法,把它们封装起来,并且可以互相替换. var strategies = { isNonEmpty: function(value,errMsg){ if(val ...

  3. 14. javacript高级程序设计-表单

    1. 表单脚本 1.1 基础知识 <from>元素表示表单: l acceptCharset:服务器能处理的字符集 l action:接受请求的URL l elements:表单中所有控件 ...

  4. nyoj756_重建二叉树_先序遍历

    重建二叉树 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 题目很简单,给你一棵二叉树的后序和中序序列,求出它的前序序列(So easy!).   输入 输入有多组数 ...

  5. c++从文件中读取特定字符串问题的总结

    1.每次从文件中读出一行作为一个字符串 可以用ifstream()函数来打开一个文件,然后用while加getline()函数即可每次读一行文件,直到文件结束 #include<unistd.h ...

  6. 【文件】读取一个文件夹下所有的jpg图片

    今天做视频处理的时候,发现给的视频是用jpg图片的形式给出的,名字的命名规律性不是很强.就想找一种通用的遍历文件夹下图片的方法. 开始在网上找到了下面这份代码,发现只能读取所有的文件夹,文件都被跳过了 ...

  7. 【python】sql语句插入中内容同时包含单引号和双引号的解决办法

    在python中调用MySQLdb模块插入数据信息,假设待输入信息data为: Hello'World"! 其中同时包含了单引号和双引号 一般插入语句为 sql = "insert ...

  8. NPOI 1.2.4教程 –日期函数

    //Excel中有非常丰富的日期处理函数,在NPOI中同样得到了很好的支持.如下图: using NPOI.HSSF.UserModel; using NPOI.HPSF; using NPOI.PO ...

  9. 三、jQuery--jQuery基础--jQuery基础课程--第3章 jQuery过滤性选择器

    1.:first过滤选择器 本章我们介绍过滤选择器,该类型的选择器是根据某过滤规则进行元素的匹配,书写时以“:”号开头,通常用于查找集合元素中的某一位置的单个元素. 在jQuery中,如果想得到一组相 ...

  10. gbdt可视化

    gbdt的最大优点,和决策树一样,高度可解释,最喜欢的分类模型:) #!/usr/bin/env python #coding=gbk # ============================== ...