-
复制代码代码如下：$（（）函数（）{ document.addeventlistener（touchmove
touchstart：触发时，手指触屏；即使手指一直放在屏幕上，它会触发。
touchmove：触发时连续的手指滑动屏幕上。在这种情况下，调用preventDefault（）可以防止滚动。
Touchend：触发时，手指从屏幕。
touchcancel：触发时，系统停止跟踪联系。关于这一事件的精确的触发事件文档中没有明确说明。
在上述事件的事件对象上存在以下属性：
触摸：表示当前跟踪到触摸操作的触摸对象数组。
TargetTouches：触摸的对象，具体到事件目标数组。
ChangeTouches：表示自上次碰了碰对象数组。
每个触摸对象包含以下属性：
X坐标ClientX：在视口中触摸目标。
Y坐标clienty：在视口中触摸目标。
标识符：用于触摸的惟一id。
PageX：在页面目标点的X坐标。
PageY：点页面中的目标Y坐标。
用ScreenX：触摸屏幕中目标的X坐标。
Screeny：触摸屏幕中目标的Y坐标。
目标的DOM节点坐标：触摸
触摸事件
规范中列出的三个基本触摸事件，并在广泛的移动设备中获得：
1。touchstart：手指被放置在一个DOM元素。
2。touchmove：手指拖动一个DOM元素。
三.touchend：手指从一个DOM元素删除。
每个触摸事件包括三个触摸列表：
1。触摸：当前屏幕上所有手指的列表。
2。targettouches：对当前的DOM元素的一个手指列表。
三.changedtouches：列出参与时事的手指
例如，在一个touchend事件，这是一个手指被删除。
这些列表由包含触摸信息的对象组成：
1。标识符：唯一标识触摸会话中当前手指（触摸会话）的数字值。
2。目标：DOM元素是由动作指示的目标。
三.客户机/页面/屏幕坐标：屏幕上动作发生的位置。
4。半径坐标和旋转角度：画一个椭圆，是手指的形状。
触摸控制中的应用
touchstart，touchmove和touchend事件支持几乎任何类型的基于触摸的交互提供了一组丰富的功能，包括常见的多点触摸手势，如捏缩放和旋转等。下面的代码可以拖动一个DOM元素在一个单一的手指触摸：
var obj = document.getelementbyidx_x_x_x_x_x_x（'id'）；
Obj.addEventListener（'touchmove功能（事件））
{如果此元素仅位于一个手指中。
如果（event.targettouches.length = 1）
{
VaR触摸=事件。targettouches { 0 }；
手指位置中的元素
obj.style.left = touch.pagex + 'px；
obj.style.top = touch.pagey + 'px；
}
}，假）；
下面是一个显示屏幕上所有当前联系人的示例，它的作用是感受设备的响应性。
设置画布并通过CTX复制代码上下文变量
canvas.addeventlistener（'touchmove，
函数（事件）{
对于（var i = 0；i < event.touches.length；i++）{
var = event.touches触摸；
Ctx.beginPath（）；
Ctx.arc（touch.pagex，touch.pagey，20, 0, 2 * Math.PI，真的）；
Ctx.fill（）；
Ctx.stroke（）；
}
}，假）；
示范
有很多有趣的多点触控游行随处可见，如图演示基于帆布基于保罗爱尔兰和其他。
Browser Ninja，一个技术示范，是水果忍者克隆使用CSS3的转换，转换，和帆布。
最佳实践
防垢
默认的多点触摸设置并不是特别有用，因为你的滑动和手势常常与浏览器的行为相关，比如滚动和缩放。
若要禁用缩放功能，请使用下面的meta标记设置您的视图区域（视口），这对用户来说是不可伸缩的：
内容=宽度=设备宽度，初始规模= 1，用户可伸缩性= NO >
看看这篇关于移动HTML 5的文章，了解更多关于视图区域设置的内容。
停止滚动
一些移动设备已经默认touchmove行为，如经典的iOS OverScroll效果，这引发了视图时反弹滚动超过内容的边界。这种方法可以使多触摸应用混乱，但很容易禁用它。
Document.body.addEventListener（'touchmove功能（事件）{
Event.preventDefault（）；
}，假）；
一丝不苟的
如果您正在编写涉及复杂多指手势的多点触摸应用程序，您应该仔细考虑如何对触摸事件作出响应，因为有这么多事情需要马上处理：
canvas.addeventlistener（'touchmove功能（事件）{
RenderTouches（事件。触动）；
}，
然而，这种技术不会随着屏幕上手指数的增加而扩大。相反，它可以跟踪所有手指并在一个循环中呈现它，这样我们才能得到更好的性能。
var触摸{ }
canvas.addeventlistener（'touchmove功能（事件）{
event.touches触动=；
}，假）；
设置每秒60帧的计时器
定时器= setInterval（）{（）函数（
RenderTouches（感动）；
}，15）；
提示：setInterval不是动画非常适合因为它没有考虑到浏览器的渲染循环。现代桌面浏览器提供requestanimationframe函数，它是基于性能和电池工作时间的一个更好的选择。一旦浏览器提供此功能的支持，它将处理事情的最佳方法。
使用targettouches和changedtouches
有一件事要记住的是，event.touches是所有手指都与屏幕接触的数组，而不只是那些在目标DOM元素。你会发现它使用event.targettouches和event.changedtouches代替event.touches更有用。
最后，由于您正在开发移动设备，您应该注意移动互联网的最佳实践。这些都是在Eric Bidelman的文章中所提到的，我们需要知道这个W3C文档。
设备支持
不幸的是，触摸事件实施的完整性和质量方面有很大的不同。我写出一些关于触摸API实现基本信息的诊断脚本，包括哪些事件的支持，和touchmove事件触发的解决方案。我测试了Android2.3.3在Nexus One和Nexus S硬件、测试程序和测试对Xoom的Android，iOS 4.2在iPad和iPhone。
总之，所有测试的浏览器支持touchstart，touchend，和touchmove事件。
该规范提供了三个附加的触摸事件，但是测试过的浏览器不支持它们：
1。touchenter：移动手指进入一个DOM元素。
2。toucheleave：把手指从一个DOM元素。
三.touchcancel：触摸中断（规范）。
测试浏览器还提供一系列的触动，targettouches，并在每个触摸列表changedtouches。然而，测试的浏览器不支持radiusx，radiusy，或旋转属性显示在触摸屏上的手指的形状。在touchmove，事件触发60次，均测试。