第一部分代码事例：

<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. android okhttp和webview session共享

    public static OkHttpClient get(Context context){ OkHttpClient.Builder builder = new OkHttpClient.Bui ...

  2. Ubuntu下安装webstorm

    需要下载 WebStorm和 JDK # tar xvf WebStorm-10.0.1.tar.gz # tar xvf jdk-8u20-linux-x64.tar.gz 配置 /etc/prof ...

  3. queue模块

    queue队列 :使用import queue,用法与进程Queue一样 queue is especially useful in threaded programming when informa ...

  4. 2017浙江工业大学-校赛决赛 小M和天平

    Description 小M想知道某件物品的重量,但是摆在他面前的只有一个天平(没有游标)和一堆石子,石子可以放左边也可以放右边.他现在知道每个石子的重量.问能不能根据上述条件,能不能测出所问的重量. ...

  5. MFC中的模态对话框与非模态对话框

    模态对话框创建: MyDialog mydlg; mydlg.DoModal() 当前只能运行此模态对话框,且停止主窗口的运行,直到模态对话框退出,才允许主窗口运行. 模态对话框的关闭顺序: OnCl ...

  6. python 生成器与迭代器

    #! /usr/bin/env python# -*- coding:utf-8 -*- def xrange(n): num = 0 while True: if num > n: retur ...

  7. 转 php include

    http://www.w3school.com.cn/php/php_includes.asp PHP include 实例 例子 1 假设我们有一个名为 "footer.php" ...

  8. 我的NopCommerce之旅(8): 路由分析

    一.导图和基础介绍 本文主要介绍NopCommerce的路由机制,网上有一篇不错的文章,有兴趣的可以看看NopCommerce源码架构详解--对seo友好Url的路由机制实现源码分析 SEO,Sear ...

  9. Apache is running a threaded MPM, but your PHP module is not compiled to be threadsafe. you need to recompile php. pre-configuration failed

    手动配置想要组合版本的wamp环境时,在服务器上直接下载的几个安装包怎么都组合安装不成功,纠结很久,终于找到原因.配置apache支持php后apache一直无法成功启动.后来发现php是nts的版本 ...

  10. 爬虫requests库的基本用法

    需要注意的几个点: 1.后面的s是一个虚拟目录 2.url后面不用加问号,发起请求的时候会自动帮你加上问号 get_url = 'http://www.baidu.com/s' 3. url的特性:u ...