虽然jQuery mobile对于手机移动设备的触摸事件已经封装了很多简单易用的类或者函数，给我们开发带来便捷的同时，也让我忽略了原生js最原生态的触摸事件原理，在某些情况我们需要用到原生js来制作触摸事件，下面带大家解读原生js的触摸事件touchstart,touchend,touchmove。

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.getElementByIdx_x（””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.length; 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和其他人实现的基于画布的绘画演示 。

还有Browser Ninja ，一个技巧演示 ， 是一个应用了CSS3的转换、过渡和画布的Fruit Ninja克隆。

最佳做法

阻拦缩放

缺省的多点触摸设置不是特此外好用，因为你的滑动和手势往往与浏览器的行动有接洽关系，比如说迁移转变和缩放。

要禁用缩放功能的话，应用下面的元标识表记标帜设置你的视图区（viewport），如许其对于用户来说就是不成伸缩的了：

content=”width=device-width， initial-scale=1.0， user-scalable=no”>

看看这篇关于移动HTML 5 的文章，懂得更多关于视图区设置的信息。

阻拦迁移转变

一些移动设备出缺省的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.touches;
}， false）;

// 设置一个每秒60帧的按时器
timer = setInterval（function（） {
renderTouches（touches）;
}， 15）;

提示 ：setInterval不太合适于动画，因为它没有推敲 到浏览器本身的衬着轮回。现代的桌面浏览器供给了requestAnimationFrame这一函数，基于机能和电池工作时候原因，这是一个更好的选 择。一但浏览器供给了对该函数的支撑，那将是首选的处理惩罚工作的体式格式。

应用targetTouches和changedTouches
要记住的一点是，event.touches是与屏幕接触的所有手指的一个数组，而不仅是位于目标DOM元素上的那些。你可能会发明应用 event.targetTouches和event.changedTouches来庖代event.touches更有效一些。

最后一点，因为你是在为移动设备做开辟，是以你应当要留心移动的最佳做法，这些在Eric Bidelman的文章 中有论及，以及要懂得这一W3C文档 。

设备支撑

遗憾的是，触摸事务的实如今完全性和质量方面的差别很大。我编写了一个诊断脚底本显示一些关于触摸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.targetTouches; i++） {
var touch = event.targetTouches[i];
console.log（””touched “” + touch.identifier）;
}
}， false）;

但下面的代码则不会：

var objs = [obj1， obj2];
for （var i = 0; i < objs.length; 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，那么多点触摸也可以被模仿。

单点触摸事务

若是你想在桌面上模仿单点触摸事务的话，试一下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插件包含到你的应用中：

< head>
…
< script src=”/path/to/magictouch.js” kesrc=”/path/to/magictouch.js”>< /script>
< /head>

< body>
…
< object id=”tuio” type=”application/x-tuio” style=”width: 0px; height: 0px;”>
Touch input plugin failed to load!
< /object>
< /body>

我只在Chrome 10上测试了这一办法，不过只要稍做调剂它应当可以或许在其他的现代浏览器上工作。

若是你的策画机没有多点触摸输入的话，你可以应用其他的TUIO，比如说reacTIVision 来模仿触摸事务。欲懂得更多信息，请参阅TUIO项目页面 。

须要重视的一点是，你的手势可所以和OS层面的多点触摸手势雷同的。在OS X上，你可以经由过程进入System Preferences中的Trackpad偏好设定版面来设备体系局限的事务。

跟着多点触摸功能逐渐获得跨移动浏览器的的广泛支撑，我很是兴奋地看到新的web应用充沛哄骗了这一雄厚的API。

转自：http://.yeeyan.org/view/213582/202991冰心

切图网是国内首家致力于web开发和用户体验研究的公司。

标签：touchend, touchmove, touchstart