移动端js触摸事件详解
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
作者 红领巾 ]
在移动开发中，一种较为容易的做法是，先在桌面上开始原型设计，然后再在打算要支持的设备上处理移动特有的部分。多点触摸正是难以在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这一库来基于npTuioClient回调模拟规范兼容的触摸事件。&4. 以如下方式把magictouch.js脚本和npTuioClient插件包含到你的应用中：&& head&
& script src="/path/to/magictouch.js" kesrc="/path/to/magictouch.js"&& /script& & /head&
& object id="tuio" type="application/x-tuio" style="width: 0 height: 0"&
Touch input plugin failed to load!
& /object& & /body&&我只在Chrome 10上测试了这一方法，不过只要稍做调整它应该能够在其他的现代浏览器上工作。&如果你的计算机没有多点触摸输入的话，你可以使用其他的TUIO跟踪器，比如说reacTIVision来模拟触摸事件。欲了解更多信息，请参阅TUIO项目页面。&需要注意的一点是，你的手势可以是和OS层面的多点触摸手势相同的。在OS X上，你可以通过进入System Preferences中的Trackpad偏好设定版面来配置系统范围的事件。随着多点触摸功能逐渐得到跨移动浏览器的的广泛支持，我非常高兴地看到新的web应用充分利用了这一丰富的API。原文来源：&原文标题：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(); //长按 } else { 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&mouseup&click&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); 与前面演示触摸事件的例子一样，这里的代码只是将每个事件都关联到同一个函数中，然后通过该函数输出每个事件的相关信息。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
CodeSecTeam微信公众号
宠辱不惊，闲看庭前花开花落；去留无意，慢随天外云卷云舒；
手机客户端移动端touch事件影响click事件的相关解决方法 - 推酷
移动端touch事件影响click事件的相关解决方法
&上周做了一个项目，发现一个DOM元素触发touch事件，竟然还会触发别的元素的click事件。
我先描述一下，当时遇到的问题。项目初始状态是下面这张图：
我给右上方的的搜索按钮，绑定了一个touchstart事件，点击以后出现一个搜索框。至于为什么不直接绑定click事件，是因为touch事件响应更快，交互上更加流畅。
这个搜索框右边的搜索按钮，绑定了一个click事件，点击后立即触发搜索。
当给这两个DOM元素，都绑定好事件以后。我们分别用android和iphone手机进行测试，得到了一个共同的结果。
当手指接触到搜索图标，立即触发了该元素的touchstart事件，下面的搜索框也随之显示。还没有完，这时候手指还会触发搜索按钮的click事件，导致搜索框提交。
整个交互变成了，点击搜索图标，就触发了搜索。这肯定不是我们想要的。
然后就查一些资料，得到了一些理论知识。最重要的一个就是事件流的概念，点击事件可以分解成多个事件。
在移动端，手指点击一个元素，会经过：touchstart --& touchmove -& touchend --》click。
事件流本身会持续进行下去的。
做了几个demo验证了一下，上面的理论。
首先给一个元素同时绑定touchstart和click事件，看谁先触发。
height:500
background:#F00;
&div class=&content&&&/div&
var content = document.querySelector(&.content&);
content.addEventListener(&touchend&, function(){
content.style.background = &#0F0&;
});content.addEventListener(&click&, function(){
content.style.background = &#00F&;
上面逻辑是给content类名的div，绑定一个touch事件和一个click事件。分别让div的背景色变成绿色和蓝色。
手机测试一下，点击一下，div是先变成绿色然后又变成蓝色。
那能不能只触发touch事件，不去触发click事件呢？查阅相关资料，
发现了preventDefault()的方法，阻止事件的默认行为。
var content = document.querySelector(&.content&);
content.addEventListener(&touchstart&, function(e){
e.preventDefault();
content.style.background = &#0F0&;
content.addEventListener(&click&, function(e){
content.style.background = &#00F&;
preventDefault()方法，可以阻止后面事件的触发。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致39644人阅读
如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP，这个页面上肯定是有很多可点击区域的，如果用户触摸到了那些可点击区域怎么办呢??
诸如智能手机和平板电脑一类的移动设备通常会有一个电容式触摸屏（capacitive touch-sensitive screen），以捕捉用户的手指所做的交互。随着移动网络的发展，其能够支持越来越复杂的应用，web开发者需要一种方法来处理这些事件。例如，几乎所 有的快节奏游戏都需要玩家一次按下多个按钮，这种方式，在触摸屏情况下，意味着多点触摸。
Apple在iOS 2.0中引入了触摸事件API，Android正迎头赶上这一事实标准，缩小差距。最近一个W3C工作组正合力制定这一触摸事件规范。
在本文中，我会深入研究iOS和Android设备提供的触摸事件API，探索一下可以构建哪些类型的应用，给出一些最佳做法，并论及一些使得可触控应用（touch-enabled application）的开发变得更加容易的有用技术。
三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件：
1.&touchstart&：手指放在一个DOM元素上。
2.&touchmove&：手指拖曳一个DOM元素。
3.&touchend&：手指从一个DOM元素上移开。
每个触摸事件都包括了三个触摸列表：
1.&touches&：当前位于屏幕上的所有手指的一个列表。
2.&targetTouches&：位于当前DOM元素上的手指的一个列表。
3.&changedTouches&：涉及当前事件的手指的一个列表。
例如，在一个touchend事件中，这就会是移开的手指。
这些列表由包含了触摸信息的对象组成：
1.&identifier&：一个数值，唯一标识触摸会话（touch session）中的当前手指。
2.&target&：DOM元素，是动作所针对的目标。
3.&客户/页面/屏幕坐标&：动作在屏幕上发生的位置。
4.&半径坐标和 rotationAngle&：画出大约相当于手指形状的椭圆形。
可触控应用
touchstart、touchmove和touchend事件提供了一组足够丰富的功能来支持几乎是任何类型的基于触摸的交互——其中包括常见的多点触摸手势，比如说捏缩放、旋转等待。
下面的这段代码让你使用单指触摸来四处拖曳一个DOM元素：
var obj = document.getElementById('id');&
obj.addEventListener('touchmove', function(event) {&
// 如果这个元素的位置内只有一个手指的话&
if (event.targetTouches.length == 1) {&
var touch = event.targetTouches[0];&
// 把元素放在手指所在的位置&
obj.style.left = touch.pageX + 'px';&
obj.style.top = touch.pageY + 'px';&
}, false);
下面是一个示例，该例子显示了屏幕上当前所有的触点，它的作用就是用来感受一下设备的响应性。
// 设置画布并通过ctx变量来暴露上下文&
canvas.addEventListener('touchmove', function(event) {&
for (var i = 0; i & event.touches. i++) {&
var touch = event.touches[i];&
ctx.beginPath();&
ctx.arc(touch.pageX, touch.pageY, 20, 0, 2*Math.PI, true);&
ctx.fill();&
ctx.stroke();&
}, false);
到处都有着许多有意思的多点触摸演示，比如说这个由Paul Irish和其他人实现的&。
还有&，一个技术演示&，&是一个使用了CSS3的转换、过渡和画布的Fruit
Ninja克隆。
缺省的多点触摸设置不是特别的好用，因为你的滑动和手势往往与浏览器的行为有关联，比如说滚动和缩放。
要禁用缩放功能的话，使用下面的元标记设置你的视图区（viewport），这样其对于用户来说就是不可伸缩的了：
content=&width=device-width, initial-scale=1.0, user-scalable=no&&&
看看&的文章，了解更多关于视图区设置的信息。
一些移动设备有缺省的touchmove行为，比如说经典的iOS overscroll效果，当滚动超出了内容的界限时就引发视图反弹。这种做法在许多多点触控应用中会带来混乱，但要禁用它很容易。
document.body.addEventListener('touchmove', function(event) {&
event.preventDefault();&
}, false);
如果你正在编写的多点触控应用涉及了复杂的多指手势的话，要小心地考虑如何响应触摸事件，因为一次要处理这么多的事情。考虑一下前面一节中的在屏幕上画出所有触点的例子，你可以在有触摸输入的时候就立刻进行绘制：
canvas.addEventListener('touchmove', function(event) {&
renderTouches(event.touches);&
不过这一技术并不是要随着屏幕上的手指个数的增多而扩充，替代做法是，可以跟踪所有的手指，然后在一个循环中做渲染，这样可获得更好的性能：
var touches = []&
canvas.addEventListener('touchmove', function(event) {&
touches = event.&
}, false);&
// 设置一个每秒60帧的定时器&
timer = setInterval(function() {&
renderTouches(touches);&
提示&：setInterval不太适合于动画，因为它没有考虑 到浏览器自己的渲染循环。现代的桌面浏览器提供了requestAnimationFrame这一函数，基于性能和电池工作时间原因，这是一个更好的选 择。一但浏览器提供了对该函数的支持，那将是首选的处理事情的方式。
使用targetTouches和changedTouches
要记住的一点是，event.touches是与屏幕接触的所有手指的一个数组，而不仅是位于目标DOM元素上的那些。你可能会发现使用 event.targetTouches和event.changedTouches来代替event.touches更有用一些。
最后一点，因为你是在为移动设备做开发，因此你应该要留心移动的最佳做法，这些在&中有论及，以及要了解&。
遗憾的是，触摸事件的实现在完备性和质量方面的差别很大。我编写了一个诊断脚本来显示一些关于触摸API实现的基本信息，其中包括哪些事件是支持 的，以及 touchmove事件触发的解决方案。我在Nexus One和Nexus S硬件上测试了Android 2.3.3，在Xoom上测试了Android 3.0.1，以及在iPad和iPhone上测试了iOS 4.2。
简而言之，所有被测试的浏览器都支持touchstart、touchend和touchmove事件。
规范提供了额外的三个触摸事件，但被测试的浏览器没有支持它们：
1.&touchenter&：移动的手指进入一个DOM元素。
2.&toucheleave&：移动手指离开一个DOM元素。
3.&touchcancel&：触摸被中断（实现规范）。
被测试的浏览器还在每个触摸列表内部都提供了touches、targetTouches和changedTouches列表。不过，被测试的浏 览器没有支持 radiusX、radiusY或是rotationAngle属性，这些属性指明触摸屏幕的手指的形状。在一次touchmove期间，事件大约一秒钟 触发60次，所有的被测试设备都是这样。
Android 2.3.3 (Nexus)
Android的Gingerbread浏览器（在Nexus One和Nexus S上测试）不支持多点触摸，这是一个&。
Android 3.0.1 (Xoom)
Xoom的浏览器对多点触摸有一个基本的支持，不过只能是在单个的DOM元素上起作用。浏览器不能正确响应同时发生在不同DOM元素上的两处触摸，换句话说，下面的代码会对两个同时发生的触摸的给出反应：
obj1.addEventListener('touchmove', function(event) {&
for (var i = 0; i & event.targetT i++) {&
var touch = event.targetTouches[i];&
console.log('touched ' + touch.identifier);&
}, false);
但下面的代码则不会：
var objs = [obj1, obj2];&
for (var i = 0; i & objs. i++) {&
var obj = objs[i];&
obj.addEventListener('touchmove', function(event) {&
if (event.targetTouches.length == 1) {&
console.log('touched ' + event.targetTouches[0].identifier);&
}, false);&
iOS 4.x (iPad, iPhone)
iOS设备完全支持多点触摸，能够跟踪多个手指，并在浏览器中提供一个非常敏感的触摸体验。
开发者工具
在移动开发中，一种较为容易的做法是，先在桌面上开始原型设计，然后再在打算要支持的设备上处理移动特有的部分。多点触摸正是难以在PC上进行测试的那些功能之一，因为大部分的PC都没有触摸输入。
不得不在移动设备上进行的测试有可能会拉长你的开发周期，因为你所做的每项改变都需要提交代码到服务器上，接着再加载到设备上。然后，一旦运行后，对应用也就没有太多的调试了，因为平板电脑和智能手机都很缺乏web开发者所用的工具。
这个问题的一个解决方案是在开发机器上模拟触发事件。对于单点触摸，触摸事件可以基于鼠标事件来模拟。如果你有触摸输入设备的话，比如说现代的App MacBook，那么多点触摸也可以被模拟。
单点触摸事件
如果你想在桌面上模拟单点触摸事件的话，试一下&，该程序在网页上模拟触摸事件并提供一只巨手来引导。
另外还有&这一jQuery插件，该插件跨平台地统一了触摸和鼠标事件。
多点触摸事件
为了能够让你的多点触摸web应用在你的浏览器或是多点触摸控板（比如说Apple MacBook或是MagicPad）上起作用，我创建了这一个&，其捕捉来自触控板的触摸事件，然后把它们转换成标准兼容的触摸事件。
1. 下载&并把它安装到~/Library/Internet Plug-Ins/目录下。
2. 下载这一Mac MagicPad的&并启动这一服务器。
3. 下载&这一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跟踪器，比如说&来模拟触摸事件。欲了解更多信息，请参阅&。
需要注意的一点是，你的手势可以是和OS层面的多点触摸手势相同的。在OS X上，你可以通过进入System Preferences中的Trackpad偏好设定版面来配置系统范围的事件。
随着多点触摸功能逐渐得到跨移动浏览器的的广泛支持，我非常高兴地看到新的web应用充分利用了这一丰富的API。
转自：http://select.yeeyan.org/view/991
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1382779次
积分：9662
积分：9662
排名：第1651名
原创：121篇
转载：86篇
评论：114条
(1)(1)(3)(2)(3)(3)(6)(3)(6)(8)(15)(3)(11)(6)(8)(25)(10)(7)(11)(6)(3)(27)(15)(19)(6)}