第一部分代码事例：

<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. 超简单 Promise封装小程序ajax 超好用 以及封装登录

    //网络类 //封装网络请求 const ajax = (ajaxData, method) => { wx.showLoading({ title: '加载中', mask: true }); ...

  2. [题解]（次短路）luogu_P2865路障（未）

    好像是个不需要vis数组的次短路,跑到收敛,然而给我脑袋弄炸了......到现在还没懂.......究竟次短路应该怎么求a...... 抄题解: #include<bits/stdc++.h&g ...

  3. html5拖动滑块

    html5中input有增加type=range.这为拖动滑块提供了很大的便利.下面是他的属性: <!DOCTYPE html> <html lang="en"& ...

  4. 文件操作，Io流。

    private void textBox1_TextChanged(object sender, EventArgs e) { } private void button1_Click(object ...

  5. gin实现spring boot url拦截器

    1.定义中间件 func middle(c *gin.Context) { fmt.Println("我是中间件") c.Next() } 2.对要拦截的路由进行分组并引入中间件 ...

  6. 【Android】SlidingMenu属性详解

    SlidingMenu 常用属性介绍: menu.setMode(SlidingMenu.LEFT);//设置左滑菜单menu.setTouchModeAbove(SlidingMenu.TOUCHM ...

  7. Android.mk模板

    此文列出Android.mk的常用模板(部分内容源于多篇他人博客,这里不具体指出),如有错漏,还请在评论中指出,后期持续更新   #链接第三方动态库,在和部分android源码的编译中验证不过 LOC ...

  8. 关于&0xF0的一些认识

    首先,要明白0xF0转换成二进制是多少 ----- 1111 0000(0xF0相当于高四位保留,低四位置为0) 我们拿麻将的一万(0x01).一条(0x11).一筒(0x21) 一万的二进制原码   ...

  9. 中国区 Azure 和全球版 Azure：功能对比

    由世纪互联运营的 Microsoft Azure(文中简称为中国区 Azure)是在中国大陆独立运营的公有云平台,与全球其他地区由微软运营的 Azure (文中简称全球版 Azure)服务在物理上和逻 ...

  10. codevs 1097 校门外的树 2005年NOIP全国联赛普及组 （线段树）

    时间限制: 1 s  空间限制: 128000 KB  题目等级 : 白银 Silver 题目描述 Description 某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米.我们可 ...