第一部分代码事例：

<html>
<head>
<meta charset="utf-8">
<style>
#main,#main1{
width:500px;
height:500px;
border:1px solid red;
}
</style>
<script type="text/javascript">
function load (){
var oInp = document.getElementById("main1");
oInp.addEventListener('touchstart',touch, false);
oInp.addEventListener('touchmove',touch, false);
oInp.addEventListener('touchend',touch, false);

function touch (event){
var event = event || window.event;

switch(event.type){
case "touchstart":
oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
case "touchend":
oInp.innerHTML = "<br/>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
break;
case "touchmove":
event.preventDefault();
oInp.innerHTML = "<br/>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
}

}
}
window.addEventListener('load',load, false);
</script>
</head>

<body>

<p id="main1">请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>

</body>
</html>

第二部分代码事例：移动端左右滑动页面切换测试代码

document.querySelector(".page2").addEventListener("touchstart", function (e1) {
e1.preventDefault();
console.log(e1)
var touch1 = e1.touches[0];
var startX = touch1.pageX;
document.querySelector(".page2").addEventListener("touchmove", function (e2) {
e2.stopPropagation();
var touch2 = e2.touches[0];
var Xc = touch2.pageX - startX;
document.querySelector(".page2").addEventListener("touchend", function (e3) {
e3.preventDefault();
if (Xc > 40) {
$(".page2").animate({
left: "640px",
width:"0px"
}, 400);
$(".page3").show();
$(".now-check").addClass("chRotate");
clearTimeout(timer1);
}
})
})
})

H5移动端触摸事件：touchstart、touchend、touchmove的更多相关文章

  1. HTML5触摸事件(touchstart、touchmove和touchend) （转）

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  2. HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)(转)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  3. HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  4. (转)HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  5. HTML5触摸事件(touchstart、touchmove和touchend)

      HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事 ...

  6. 转载–移动互联网终端的touch事件,touchstart, touchend, touchmove

    转载请注明: 转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题.最新的WEB前端开发技术(webApp开发.移动网站开发).最好的WEB前端开发工具和最全的WEB前端 ...

  7. 移动互联网终端的touch事件,touchstart, touchend, touchmove 很棒的文章

    转载请注明: 转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题.最新的WEB前端开发技术(webApp开发.移动网站开发).最好的WEB前端开发工具和最全的WEB前端 ...

  8. 2014-08-28——移动端，触摸事件 touchstart、touchmove、touchend、touchcancel

    1.Touch事件简介在移动终端上的web页面触屏时会产生ontouchstart.ontouchmove.ontouchend.ontouchcancel 事件,分别对应了触屏开始.拖拽及完成触屏事 ...

  9. 移动互联网终端的touch事件,touchstart, touchend, touchmove

    如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP,这个页面上肯定是有很多可点击区域的,如果用户触摸到了那些可点击区域怎么办呢??诸如智能手机和平板电脑一类的移动设备通常会有一 ...

  10. [转]html 移动互联网终端的javascript touch事件,touchstart, touchend, touchmove

    前言 如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP,这个页面上肯定是有很多可点击区域的,如果用户触摸到了那些可点击区域怎么办呢??诸如智能手机和平板电脑一类的移动设备通常 ...

随机推荐

  1. bzoj1458士兵占领

    传送门 和上一题差不多,每行和每列分别看做一个点,障碍点坐标的行和列就不建边,再按照有源汇上下界建图就好了,唯一的区别就是这个题求的是最小流 这个题的数据好水呢,建错图也能A呢 #include< ...

  2. 1-zookeeper基本原理和使用

    1 分布式应用 1.1 分布式系统原理 在一个网络中,每台服务器上各跑一个应用,然后彼此连接起来就组成一套系统.比如提供完成的游戏服务,需要有认证应用,道具应用,积分应用,游戏主应用等,应用并非跑在一 ...

  3. redis开发小结

    随着缓存在web服务中用的越来越广泛,redis可以说成为了目前最流行的NoSQL数据库!redis与memcached最大的不同在于redis支持更多的数据类型,包括string.hash.list ...

  4. Guard Duty (medium) Codeforces - 958E2 || (bzoj 2151||洛谷P1792) 种树 || 编译优化

    https://codeforces.com/contest/958/problem/E2 首先求出N个时刻的N-1个间隔长度,问题就相当于在这些间隔中选K个数,相邻两个不能同时选,要求和最小 方法1 ...

  5. windows安装redis和PHP redis扩展

    1.安装Redis (1)这里选择在github官网上下载Redis,地址:Redis下载地址 下载压缩包(如下图),并解压到本地目录,我放在D:\wamp\redis\redis-windows ( ...

  6. Redis 数据导入导出,redis-dump命令

    安装redis-dump 工具 yum install ruby rubygems ruby-devel# 修改为国内源gem sources --add http://gems.ruby-china ...

  7. Java设计模式之单例模式 - Singleton

    用来创建独一无二的,是能有一个实例的对象的入场券.告诉你一个好消息,单例模式的类图可以说是所有模式的类图中最简单的,事实上,它的类图上只有一个类!但是,可不要兴奋过头,尽管从类设计的视角来说很简单,但 ...

  8. error: stray '\343' in program 问题解决

          当我们从网上copy一段代码后,总会出现这个问题.博主在Arduino环境中也出现了,so,这个问题应该是C语言和C++编译器中才会出现的. test_int:19: error: str ...

  9. DVWA之命令注入（command injection）

    Command injection就是指通过提交恶意构造的参数破坏命令语句结构,从而达到执行恶意命令的目的 LOW 无论是Windows还是Linux,都可以使用&&连接多个命令 执行 ...

  10. OpenStack安装keyston 错误BError: (pymysql.err.InternalError) (1071, u‘Specified key was too long; max key length is 767 bytes‘) [SQL: u‘\nCREATE TABLE migrate_ver

    折腾了两天的错误,BError: (pymysql.err.InternalError) (1071, u‘Specified key was too long; max key length is ...