移动端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插件包含到你的应用中： 

< 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。