指尖下的js -- 多触式web前端开发之一：对于Touch的处理
水果公司的那些small and cute的设备给我们提供了前所未有的用户体验。当用户在iphone和ipad上运指如飞的时候，那些使用objective-c写出优秀应用的开发人员们心里一定充满了成就感，因为正是他们（而不是水果）让iOS的世界变的丰富多彩。然而对于我们这些以web为自己事业核心的程序员来说，这种让人欲罢不能的多触式体验似乎跟我们关系不大，因为浏览器那一小块地方就是我们和用户的全部交集了。而许多网站为了让iOS的用户能够在多触式体验下使用自己的服务，都专门花钱开发objective-c的本地程序作为自己web service的客户端。
其实，对于一个web程序员或者一个网站来说，如果你的需求仅仅是让iPhone/iPad用户能够正常使用你的服务，那现有的html4页面完全能够满足（也许需要一点点重构，但是很容易）；如果再往上一点，你需要让你的web客户端看起来像是用objective-c实现的一样，也并非不可能，只需要将我们熟悉的javascript搬到iOS设备上来就行。
本文从一个多触式网页开发初学者的角度，首先简单介绍一下iOS上的浏览器（这里主要指Safari）所支持的多触式事件模型，然后将触控（Touch）这种简单的动作升级为手势（Gestrue），最后将javascript + html + css构建的应用脱离浏览器，放到iOS设备的屏幕上成为一个本地link并和植物大战僵尸放到一起。
iOS上的Safari也支持click 和mouseover等传统的交互事件，只是不推荐在iOS的浏览器应用上使用click和mouseover，因为这两个事件是为了支持鼠标点击而设计出来的。Click事件在iOS上会有半秒左右的延迟，原因是iOS要highlight接收到click的element。而mouseover/out等事件则会被手指的点击触发。所以，在iOS上，应当抛弃传统的交互事件模型而接受一个新的事件模型。Touch事件和更高级的Gesture事件，能让你的网页交互起来像native应用一样。
处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件：
touchstart: 手指放到屏幕上的时候触发
touchmove: 手指在屏幕上移动的时候触发
touchend: 手指从屏幕上拿起的时候触发
touchcancel: 系统取消touch事件的时候触发。至于系统什么时候会取消，不详。。
Gesture事件则是对touch事件的更高级的封装，主要处理手指slide、rotate、scale等动作，将在下一篇文章详述。
在开始描述touch事件之前，需要先描述一下多触式系统中特有的touch对象（android和iOS乃至nokia最新的meego系统都模拟了类似的对象，这里只针对iOS，因为我只有iPad可用于测试。。）。这个对象封装一次屏幕触摸，一般来自于手指。它在touch事件触发的时候产生，可以通过touch event handler的event对象取到（一般是通过event.changedTouches属性）。这个对象包括一些重要的属性：
client / clientY：触摸点相对于浏览器窗口viewport的位置
pageX / pageY：触摸点相对于页面的位置
screenX /screenY：触摸点相对于屏幕的位置
identifier： touch对象的unique ID
我们从一个单根手指触摸的实例开始进入多触式网页的世界。当一根手指放下的时候，屏幕上出现一个方块，手指移动方块也随着移动，手指提起方块消失。首先，让我们定义一下方块的css：
框架是一定要用的，但是一些和传统web不同的技术基础也该普及一下嘛，我也是刚开始入门多触式的web开发，大家共同学习！
对于一些web服务来说，将已有的网页重构为多触式的网页，比开发objective-c客户端还是要便宜多了，objective-c我也在学，学习成本还是比较高的（我比较笨）。。。而且，这样做的最大好处是省去了发布、推广客户端的麻烦，水果app store的审查比较烦。
而且，将html + javascript + css发布为native程序也是可以的。
fkpwolf 写道代价比用Objective-c重写高？不一定。如果你对HTML和JAVASCRIPT非常熟悉，可能是这样，如果跟我一样是个半吊子，要写出有吸引力的UI还是费功夫的。
尽量使用REST可能对UI的跨平台性有帮助，客户端也就演变成RIA了。
7 楼 fkpwolf 2010-09-18 苹果也大力推荐HTML5，感觉这个不是根自己的app store背道而驰么？想不明白 8 楼 zhouqinghao 2010-09-19 都下载不了，骗人的！ 9 楼 jallin 2010-09-19 哈哈，学习了 10 楼 afcn0 2010-09-20 http://www.frumtube.com/facebook/swipe7/
ipad上面支持flip，页面布局随方向变化，菜单隐藏，拖动