移动端的touch事件（一） | 前端学习
移动端的应用现在占据着越来越大的比重，所以对于前端开发人员来说，就不得不去学习移动端开发的技能，相对于PC端，移动端有更炫的界面展示，并且可以随意的使用各种PC端不能随意使用的东西，比如HTML5和CSS3，虽然移动端的开发的开发现在智能手机，大屏幕的移动设备，越来越普及，也就导致了移动端一些
移动端的touch事件的基础就是基于touch对象的，每一个touch对象，都包含了一些基本的信息，来记录该对象的详细信息，而我们在后面进行的处理，就是在对这些信息的收集，分析，响应，处理的过程。
那么，touch对象，具体包含哪些属性和方法呢？
identifier
Touch 对象的唯一标识符. 一次触摸动作(我们指的是手指的触摸)在平面上移动的整个过程中, 该标识符不变. 可以根据它来判断跟踪的是否是同一次触摸过程. 只读属性.
触点相对于屏幕左边沿的的X坐标. 只读属性.
触点相对于屏幕上边沿的的Y坐标. 只读属性.
触点相对于可见视区(visual viewport)左边沿的的X坐标. 不包括任何滚动偏移. 只读属性.
触点相对于可见视区(visual viewport)上边沿的的Y坐标. 不包括任何滚动偏移. 只读属性.
触点相对于可见视区(visual viewport)左边沿的的X坐标. 不包括任何滚动偏移. 只读属性.
触点相对于HTML文档左边沿的的X坐标. 当存在水平滚动的偏移时, 这个值包含了水平滚动的偏移. 只读属性.
触点相对于HTML文档上边沿的的Y坐标. 当存在水平滚动的偏移时, 这个值包含了垂直滚动的偏移. 只读属性.
能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径. 这个值的单位和 screenX 相同. 只读属性.
能够包围用户和触摸平面的接触面的最小椭圆的垂直轴(Y轴)半径. 这个值的单位和 screenY 相同. 只读属性.
rotationAngle
它是这样一个角度值：由radiusX 和 radiusY 描述的正方向的椭圆，需要通过顺时针旋转这个角度值，才能最精确地覆盖住用户和触摸平面的接触面. 只读属性.
手指挤压触摸平面的压力大小, 从0.0(没有压力)到1.0(最大压力)的浮点数. 只读属性.
当这个触点最开始被跟踪时(在 touchstart 事件中), 触点位于的HTML元素. 哪怕在触点移动过程中, 触点的位置已经离开了这个元素的有效交互区域, 或者这个元素已经被从文档中移除. 需要注意的是, 如果这个元素在触摸过程中被移除, 这个事件仍然会指向它, 但是不会再冒泡这个事件到 window 或 document 对象. 因此, 如果有元素在触摸过程中可能被移除, 最佳实践是将触摸事件的监听器绑定到这个元素本身, 防止元素被移除后, 无法再从它的上一级元素上侦测到从该元素冒泡的事件. 只读属性.
上述这些，都是touch对象比较基本的一些信息，同时touch事件还有一些事件响应，这个后面继续说。
如果想要看看touch对象有哪些具体的属性，可以再移动端点击下面这个链接，并用手指进行触摸操作，
touch对象上的属性是很多的，如果您有耐心的把上一个链接使用手机浏览器打开，并执行了触摸操作，你会看到很多上一小节的列表中，不包含的属性，就比如，我们这里想要说的事件类型属性，事件类型的属性是保存在TouchEvent.type的标签中的。
注意: 在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。如果你使用了触摸事件，可以调用 event.preventDefault() 来阻止鼠标事件被触发。
TouchEvent.type的值，理论上包含以下几种：
touchstart
当用户在触摸平面上放置了一个触点时触发，类似于click事件中的mouseDown事件。当手指接触触摸屏时被触发
当一个触点被用户从触摸平面上移除（当用户将一个手指离开触摸平面）时触发。当触点移出触摸平面的边界时也将触发。事件的目标 element 和这个 touchend 事件对应的 touchstart 事件的目标 element 相同，哪怕 touchend 事件触发时，触点已经移出了该 element 。
当用户在触摸平面上移动触点时触发。事件的目标 element 和这个 touchend 事件对应的 touchstart 事件的目标 element 相同，哪怕当 touchend 事件触发时，触点已经移出了该 element 。当触点的半径、旋转角度以及压力大小发生变化时，也将触发此事件。注意: 不同浏览器上 touchmove 事件的触发频率并不相同。这个触发频率还和硬件设备的性能有关。因此决不能让程序的运作依赖于某个特定的触发频率
touchenter
当触点进入某个 element 时触发。注意: 此事件没有冒泡过程。
touchleave
当触点离开某个 element 时触发。注意: 此事件没有冒泡过程。
touchcancel
当触点由于某些原因被中断时触发。有几种可能的原因如下（具体的原因根据不同的设备和浏览器有所不同）：1,由于某个事件取消了触摸：例如触摸过程被一个模态的弹出框打断。2,触点离开了文档窗口，而进入了浏览器的界面元素、插件或者其他外部内容区域。3,当用户产生的触点个数超过了设备支持的个数，从而导致 TouchList 中最早的 Touch 对象被取消。
在我现在的感觉中，我们常用的只有两种属性，那就是touchstart和touchend事件。touchmove事件我也觉得是很不错的，只是IOS的有些版本下，只有在touchstart事件的时候，才会触发一次touchmove，然后在touchend之前，都不会再继续触发touchmove事件，所以，觉得这个事件有点鸡肋，并没有什么实际的用途。
并且，不管touchstart和touchend事件，都是touch事件的一部分，而touch事件在没有执行结束之前，是无法执行其他的事件的，说白了，就是JS是一个单线程的语言，而touch事件是一个动作，在touch事件没有志向完成之前，是不能执行其他的动作的，包括事件计时器等，看下面的这个例子：
代码以及结构都是很简单的，如下：
&h1&touchStart event&/h1&
&div id = "touchStart"&&/div&
&h1&touchEnd event&/h1&
&div id = "touchEnd"&&/div&
&div style = "color:#f00;margin-bottom:20"&
计时器：&span id = "timeInter"&0&/span&
&div style = "height:100"&test&/div&
&div style = "height:100"&test&/div&
&div style = "height:100"&test&/div&
&div style = "height:100"&test&/div&
&div style = "height:100"&test&/div&
&script type="text/javascript"&
function $(id){
return document.getElementById(id);
var i = 0;
setInterval(function (){
$("timeInter").innerHTML = ++i;
这个页面对于前端开发来说应该是一个很常见的，也算是很基础的一个功能了，那就是计时器，但是当移动端来临，touch事件的出现，这个计时器就不再那么完美了，因为想想计时器的工作原理，每隔一定的时间，把一个需要调用的函数，推入到事件队列中，但是当alert，这样的阻塞事件发生时，就会影响计时器的工作，也有一种情况就是，某一段JS执行需要很长的时间，也会影响，而touch事件的触发，就是这样，比如像上面的这个简单的例子，如果你的手指在页面上一直处于滑动状态，就是抱着touch事件一直处于触发状态，那么整个页面就会被阻塞，无法执行其他的所有的JS代码。
移动端查看示例地址：,
这里，你也许会想到之前刚刚提到的一个touch事件的类型，touchmove事件，是不是我们可以再touchmove事件内部进行处理呢？
关于touchmove事件的问题，之前也有提到过了，不知道您是否还记得，就是touchmove事件，在有些系统上（IOS和Android都有吧，不能保证是否所有的系统都是这样），touchmove事件，只和touchstart同时被触发，而在之后，touchend之前，是不会再次被触发的，也就是说，在每一次的touch事件的过程中，只会触发一次touchmove事件，那么这个事件又有什么用处呢？
关于tocuhmove事件只被触发一次的示例，可以移动端查看下面的这个链接：
在我自己的Android设备上，以及之前在IOS下见过的一些情况，得出的是上述的结果，也许有的系统是支持的。
OK，这里关于touch事件的一些基础，先写到这里。
关于touch事件会阻塞的问题，想想也是很容易理解的，毕竟JS是单线程的编程语言，而所有我们平时由于一些计算耗时过长，或者逻辑复杂，或者数据量大导致的页面假死的状态，都会影响整个页面的流畅性，因为他们都是一致在执行着JS代码，没有结束，所以导致其他代码无法执行。
而这里的touch事件，也是相同的原因，毕竟touch属于一个事件，而在这个事件没有执行结束之前，那么JS一直就是在执行着这个问题，而其他事件，都会因为touch事件的正在执行，而一直在事件流中处于排队状态。所以，可以理解，但是，touch事件的存在，就让计时器做时间判断时，在移动端就出了问题了。这个要在以后的移动端开发方面，多多注意了。
OK，本文暂且说到这里，如有疑问，请指正。
本文地址：登录以解锁更多InfoQ新功能
获取更新并接收通知
给您喜爱的内容点赞
关注您喜爱的编辑与同行
966,690 六月 独立访问用户
语言 & 开发
架构 & 设计
文化 & 方法
您目前处于：
移动Web之触摸和指针事件详解
移动Web之触摸和指针事件详解
Peter-Paul Koch
0&他的粉丝
日. 估计阅读时间:
，帮助企业降本增效？让我们深度了解几个成功的案例。
Author Contacted
语言 & 开发
446 他的粉丝
0 他的粉丝
134 他的粉丝
0 他的粉丝
3 他的粉丝
225 他的粉丝
0 他的粉丝
相关厂商内容
相关赞助商
告诉我们您的想法
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
赞助商链接
InfoQ每周精要
订阅InfoQ每周精要，加入拥有25万多名资深开发者的庞大技术社区。
架构 & 设计
文化 & 方法
InfoQ.com及所有内容，版权所有 ©
C4Media Inc. InfoQ.com 服务器由 提供, 我们最信赖的ISP伙伴。
极客邦控股（北京）有限公司
找回密码....
InfoQ账号使用的E-mail
关注你最喜爱的话题和作者
快速浏览网站内你所感兴趣话题的精选内容。
内容自由定制
选择想要阅读的主题和喜爱的作者定制自己的新闻源。
设置通知机制以获取内容更新对您而言是否重要
注意：如果要修改您的邮箱，我们将会发送确认邮件到您原来的邮箱。
使用现有的公司名称
修改公司名称为：
公司性质：
使用现有的公司性质
修改公司性质为:
使用现有的公司规模
修改公司规模为：
使用现在的国家
使用现在的省份
Subscribe to our newsletter?
Subscribe to our industry email notices?
通过订阅此邮件，我们可能会根据您以往感兴趣的主题向您发送内容。关于更多详情，请参阅我们的。
我们发现您在使用ad blocker。
我们理解您使用ad blocker的初衷，但为了保证InfoQ能够继续以免费方式为您服务，我们需要您的支持。InfoQ绝不会在未经您许可的情况下将您的数据提供给第三方。我们仅将其用于向读者发送相关广告内容。请您将InfoQ添加至白名单，感谢您的理解与支持。移动端js触摸事件详解
转载 &更新时间：日 10:45:34 & 作者：菜鸟的飞翔梦
这篇文章主要为大家详细介绍了移动端js触摸事件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
在移动开发中，一种较为容易的做法是，先在桌面上开始原型设计，然后再在打算要支持的设备上处理移动特有的部分。多点触摸正是难以在PC上进行测试的那些功能之一，因为大部分的PC都没有触摸输入。&
不得不在移动设备上进行的测试有可能会拉长你的开发周期，因为你所做的每项改变都需要提交代码到服务器上，接着再加载到设备上。然后，一旦运行后，对应用也就没有太多的调试了，因为平板电脑和智能手机都很缺乏web开发者所用的工具。
这个问题的一个解决方案是在开发机器上模拟触发事件。对于单点触摸，触摸事件可以基于鼠标事件来模拟。如果你有触摸输入设备的话，比如说现代的App MacBook，那么多点触摸也可以被模拟。&
单点触摸事件&
如果你想在桌面上模拟单点触摸事件的话，试一下Phantom Limb，该程序在网页上模拟触摸事件并提供一只巨手来引导。
另外还有Touchable这一jQuery插件，该插件跨平台地统一了触摸和鼠标事件&
多点触摸事件&
为了能够让你的多点触摸web应用在你的浏览器或是多点触摸控板（比如说Apple MacBook或是MagicPad）上起作用，我创建了这一个MagicTouch.js填充工具，其捕捉来自触控板的触摸事件，然后把它们转换成标准兼容的触摸事件。&
1. 下载npTuioClient NPAPI插件并把它安装到~/Library/Internet Plug-Ins/目录下。&
2. 下载这一Mac MagicPad的TongSeng TUIO应用并启动这一服务器。&
3. 下载MagicTouch.js这一javascript库来基于npTuioClient回调模拟规范兼容的触摸事件。&
4. 以如下方式把magictouch.js脚本和npTuioClient插件包含到你的应用中：&
& script src="/path/to/magictouch.js" kesrc="/path/to/magictouch.js"&& /script&
& object id="tuio" type="application/x-tuio" style="width: 0 height: 0"&
Touch input plugin failed to load!
& /object&
我只在Chrome 10上测试了这一方法，不过只要稍做调整它应该能够在其他的现代浏览器上工作。&
如果你的计算机没有多点触摸输入的话，你可以使用其他的TUIO跟踪器，比如说reacTIVision来模拟触摸事件。欲了解更多信息，请参阅TUIO项目页面。&
需要注意的一点是，你的手势可以是和OS层面的多点触摸手势相同的。在OS X上，你可以通过进入System Preferences中的Trackpad偏好设定版面来配置系统范围的事件。
随着多点触摸功能逐渐得到跨移动浏览器的的广泛支持，我非常高兴地看到新的web应用充分利用了这一丰富的API。
原文来源：html5rocks.com&
原文标题：Developing for Multi-Touch Web Browsers
一、手机上的触摸事件
基本事件：
touchstart //手指刚接触屏幕时触发&
touchmove //手指在屏幕上移动时触发&
touchend //手指从屏幕上移开时触发
下面这个比较少用：touchcancel //触摸过程被系统取消时触发&
每个事件都有以下列表，比如touchend的targetTouches当然是 0 咯：
touches //位于屏幕上的所有手指的列表
targetTouches //位于该元素上的所有手指的列表
changedTouches //涉及当前事件的所有手指的列表&
每个事件有列表，每个列表还有以下属性：
其中坐标常用pageX,pageY：&
pageX //相对于页面的 X 坐标&
pageY //相对于页面的 Y 坐标&
clientX //相对于视区的 X 坐标&
clientY //相对于视区的 Y 坐标&
screenX //相对于屏幕的 X 坐标&
screenY //相对于屏幕的 Y 坐标
identifier // 当前触摸点的惟一编号&
target //手指所触摸的 DOM 元素&&
其他相关事件：
event.preventDefault（） //阻止触摸时浏览器的缩放、滚动条滚动&
var supportTouch = "createTouch" in document //判断是否支持触摸事件
以下是获取不同类型滑动的代码具体做法，结合前人的思想，封装好了，可以借鉴学习：
var touchFunc = function(obj,type,func) {
//滑动范围在5x5内则做点击处理，s是开始，e是结束
var init = {x:5,y:5,sx:0,sy:0,ex:0,ey:0};
var sTime = 0, eTime = 0;
type = type.toLowerCase();
obj.addEventListener("touchstart",function(){
sTime = new Date().getTime();
init.sx = event.targetTouches[0].pageX;
init.sy = event.targetTouches[0].pageY;
init.ex = init.
init.ey = init.
if(type.indexOf("start") != -1) func();
}, false);
obj.addEventListener("touchmove",function() {
event.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动
init.ex = event.targetTouches[0].pageX;
init.ey = event.targetTouches[0].pageY;
if(type.indexOf("move")!=-1) func();
}, false);
obj.addEventListener("touchend",function() {
var changeX = init.sx - init.
var changeY = init.sy - init.
if(Math.abs(changeX)&Math.abs(changeY)&&Math.abs(changeY)&init.y) {
//左右事件
if(changeX & 0) {
if(type.indexOf("left")!=-1) func();
if(type.indexOf("right")!=-1) func();
else if(Math.abs(changeY)&Math.abs(changeX)&&Math.abs(changeX)&init.x){
//上下事件
if(changeY & 0) {
if(type.indexOf("top")!=-1) func();
if(type.indexOf("down")!=-1) func();
else if(Math.abs(changeX)&init.x && Math.abs(changeY)&init.y){
eTime = new Date().getTime();
//点击事件，此处根据时间差细分下
if((eTime - sTime) & 300) {
if(type.indexOf("long")!=-1) func(); //长按
if(type.indexOf("click")!=-1) func(); //当点击处理
if(type.indexOf("end")!=-1) func();
}, false);
转载的文章：手机触摸屏的JS事件
处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件：&
&&& 1.touchstart: // 手指放到屏幕上的时候触发&&
&&& 2.touchmove: // 手指在屏幕上移动的时候触发&&
&&& 3.touchend: // 手指从屏幕上拿起的时候触发&&
&&& 4touchcancel: // 系统取消touch事件的时候触发。至于系统什么时候会取消，不详&
&&& 1.client / clientY：// 触摸点相对于浏览器窗口viewport的位置&&
&&& 2.pageX / pageY：// 触摸点相对于页面的位置&&
&&& 3.screenX /screenY：// 触摸点相对于屏幕的位置&&
&&& 4.identifier： // touch对象的unique ID&
//touchstart事件
function touchSatrtFunc(e) {
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = e.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
//记录触点初始位置
//touchmove事件
function touchMoveFunc(e) {
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
var text = 'TouchMove事件触发：（' + x + ', ' + y + '）';
//判断滑动方向
if (x - startX != 0) {
//左右滑动
if (y - startY != 0) {
//上下滑动
转载的第二篇文章：Mobile Web前端开发系列: 事件处理（二）
上篇文章我们讲了html的基本事件，这篇文章我们着重讲解下触摸事件，触摸事件触发的条件是手指接触屏幕、手指在屏幕上移动或者从屏幕上离开。 事件是触摸的集合，它起始于手指初次放置在屏幕上，终止于最后一个手指离开屏幕。事件从开始到结束过程中的所有触摸操作都存储在相同事件的记录中。&
touch事件&
touch事件可以分为单点触摸和多点触摸两种，单点触摸高端机一般都支持，Safari2.0、Android3.0以上的版本支持多点触摸，支持最多5个手指同时触摸屏幕，ipad最多支持11个手指同时触摸屏幕， 我们可以采用以下的事件模型捕获这些事件：&
ontouchstart ontouchmove ontouchend ontouchcancel&
当用户按下手指在屏幕上，ontouchstart会被触发，当用户移动一个或多个手指的时候，ontouchmove会被触发，当用户移走手指， ontouchend被触发。那什么时候触发ontouchcancel呢？当一些更高级别的事件发生的时候，例如，alert，有电话打来或者有 推送的消息提示的时候会取消当前的touch操作，即触发ontouchcancel。当你在开发一个web game的时候，ontouchcancel 对你很重要，你可以在ontouchcancel触发的时候暂停游戏或者保存游戏。&
gesture事件&
gesture事件的运行原理与touch事件相同，只是gesture事件仅当屏幕上存在至少两个手指时触发，所以Safari2.0、Android3.0以上版本支持， 手势具备诸多优势，可以帮助我们测量两指放缩和旋转操作，事件模型如下：
ongesturestart ongesturechange ongestureend&
无论使用触摸还是手势事件，你都需要将这些事件转换为单独的触摸来使用它们。为此，你需要访问事件对象的一系列的属性。&
targetTouches 目标元素的所有当前触摸 changedTouches 页面上最新更改的所有触摸 touches 页面上的所有触摸&
changedTouches、targetTouches和touches分别包含稍微不同的触摸列表。targetTouches和touches分别包含当前位于 屏幕上的手指列表，但changedTouches仅列出最后发生的触摸。如果你在使用touchend或者gestureend事件，那么这个属性 非常重要。在这两种情况下，屏幕上都不会再出现手指，因此targetTouches和touches应该为空，但你仍然可以通过查看 changedTouches数组来了解最后发生的事情。&
由于触摸属性都会生成数组，因此你可以使用JavaScript数组函数来访问它们。这意味着，event.touches[0]将返回第一次 触摸，并且可以使用event.touches.length来计算当前存储的触摸数量。&
查看单独触摸时，通过使用event.targetTouches[0],你也可以访问其它触摸，每个触摸会包含一些具体信息，&
clientX、clientY 相对于当前屏幕的X或Y位置 pageX、pageY 相对于整体页面的X或Y位置 screenX、screenY 相对于用户计算机屏幕的X或Y位置 identifier 事件的唯一标识符 target 生成触摸的目标对象&
手势事件的事件对象会比普通触摸事件多两个属性，rotation 手指的旋转角度 scale 放缩的值
转载文章：JavaScript触摸与手势事件
iOS版Safari为了向开发人员传达一些特殊信息，新增了一些专有事件。因为iOS设备既没有鼠标也没有键盘，所以在为移动Safari开发交互网页时，常规的鼠标和键盘事件根本不够用。随着Android中的WebKit的加入，很多这样的专有事件变成了事实标准。&
1.触摸事件
包含iOS2.0软件的iPhone 3G发布时，也包含了一个新版本的Safari浏览器。这款新的移动Safari提供了一些与触摸(touch)操作相关的新事件。后来,Android上的浏览器也实现了相同的事件。触摸事件会在用户手指放在屏幕上面时、在屏幕上滑动时或从屏幕上移开时触发。具体来说，有以下几个触摸事件。&
touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。&
touchmove:当手指在屏幕上滑动时连续的触发。在这个事件发生期间，调用preventDefault()可阻止滚动。&
touchend:当手指从屏幕上移开时触发。
touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发事件，文档中没有明确说明。&
上面这几个事件都会冒泡，也都可以取消。虽然这些触摸事件没有在DOM规范中定义，但它们却是以兼容DOM的方式实现的。因此，每个触摸事件没有在DOM规范中定义，但它们却是以兼容DOM的方式实现的。因此，每个触摸事件的event对象都提供了在鼠标事件中常见的属性:bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey和metaKey。&
除了常见的DOM属性外，触摸事件还包含下列三个用于跟踪触摸的属性。&
touches:表示当前跟踪的触摸操作的Touch对象的数组。&
targetTouches:特定于事件目标的Touch对象的数组。&
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。&
每个Touch对象包含下列属性。&
clientX:触摸目标在视口中的X坐标。&
clientY:触摸目标在视口中的Y坐标。&
identifier：表示触摸的唯一ID。&
pageX：触摸目标在页面中的x坐标。&
pageY：触摸目标在页面中的y坐标。&
screenX:触摸目标在屏幕中的x坐标。&
screenY:触摸目标在屏幕中的y坐标。&
target:触摸的DOM节点坐标。&
使用这些属性可以跟踪用户对屏幕触摸操作。来看下面的例子。
function handleTouchEvent(event) {
//只跟踪一次触摸
if (event.touches.length == 1) {
var output = document.getElementById("output");
switch (event.type) {
case "touchstart":
output.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
case "touchend":
output.innerHTML += "&br&Touch ended (" + event.changedTouches[0].clientX + "," + event.changeTouches[0].clientY + ")";
case "touchmove":
event.preventDefault(); //阻止滚动
output.innerHTML += "&br&Touch moved (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
document.addEventListener("touchstart", handleTouchEvent, false);
document.addEventListener("touchend", handleTouchEvent, false);
document.addEventListener("touchmove", handleTouchEvent, false);
以上代码会跟踪屏幕上发生的一次触摸操作。为简单起见，只会在有一次活动触摸操作的情况下输出信息。当touchstart事件发生时。会将触摸的位置信息输出到&
元素中。当touchmove事件发生时，会取消其默认行为，阻止滚动（触摸移动的默认行为是滚动页面），然后输出触摸操作的变化信息。而touched事件则会输出有关触摸操作的最终信息。注意，在touched事件发生时，touched集合中就没有任何Touch对象了，因为不存在活动的触摸操作;此时，就必须转而使用changeTouchs集合。&
这些事件会在文档的所有元素上面触发，因而可以分别操作页面的不同部分。在触摸屏幕上的元素时，这些事件发生的数序如下：&
touchstart&
mouseover&
mousemove&
mousedown&
&touchend&
支持触摸事件的浏览器包括iOS版Safari、Android版WebKit、beta版Dolfin、OS6+中的BlackBerry WebKit、Opera Mobile 10.1和LG专有OS中的phantom浏览器。目前只有IOS版Safari支持多点触屏。桌面版Firefox 6+和Chrome也支持触摸事件。&
2.手势事件&
IOS 2.0中的Safari还引入了一组手势事件。当两个手指触摸屏幕时就会产生手势，手势通常会改变显示项的大小，或者旋转显示项。有三个手势事件，分别如下。&
gesturestart:当一个手指已经按在屏幕上面另一个手指有触摸屏幕时触发。&
gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发。&
gestureend:当任何一个手指从屏幕上面移开时触发。&
只有两个手指都触摸到事件的接收容器时才会触发这些事件。在一个元素上设置事件处理程序，意味着两个手指必须同时位于该元素的范围之内，才能触发手势事件（这个元素就是目标）。由于这些事件冒泡，所以将事件处理程序放在文档上也可以处理所有手势事件。此时，事件的目标就是两个手指都位于其范围内的那个元素。&
触摸事件和手势事件之间存在某种关系。当一个手指放在屏幕上时，会触发touchstart事件。如果另一个手指又放在了屏幕上，则会先触发gesturestart事件。如果另一个手指又放在了屏幕上，则会先触发gesturestart事件，随后触发基于该手指的touchstart事件。如果一个或两个手指在屏幕上滑动，将会触发gesturechange事件，但只要有一个手指移开，就会触发gestureend事件，紧接着又会触发基于该手指的touchend事件。&
与触摸事件一样，每个手势事件的event对象都包含着标准的鼠标事件属性：bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey和metaKey。此外，还包含两个额外的属性：rotation和scale。其中,rotation属性表示手指变化引起的旋转角度，负值表示逆时针旋转，正值表示顺时针旋转（该值从0开始）。而scale属性表示两个手指间距的变化情况（例如向内收缩会缩短距离）;这个值从1开始，并随距离拉大而增长，随距离缩减而减小。&
下面是使用手势事件的一个示例：&
function handleGestureEvent(event) {
var output = document.getElementById("output");
switch(event.type) {
case "gesturestart":
output.innerHTML = "Gesture started (rotation=" + event.ratation +",scale=" + event.scale + ")";
case "gestureend":
output.innerHTML += "&br&Gesture ended (rotation+" + event.rotation + ",scale=" + event.scale + ")";
case "gesturechange":
output.innerHTML += "&br&Gesture changed (rotation+=" + event.rotation + ",scale+" + event.scale + ")";
document.addEventListener("gesturestart", handleGestureEvent, false);
document.addEventListener("gestureend", handleGestureEvent, false);
document.addEventListener("gesturechange", handleGestureEvent, false);
与前面演示触摸事件的例子一样，这里的代码只是将每个事件都关联到同一个函数中，然后通过该函数输出每个事件的相关信息。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具