指尖下的js ——多触式web前端开发之一:对于Touch的处理

本文介绍了在多触式web前端开发中如何处理touch事件,包括touchstart、touchmove和touchend,以及如何利用webkitTransform移动元素。通过示例代码展示了一个简单的多触点交互应用,同时探讨了Gesture事件对于封装常见手势的意义,提到在touchend事件中changedTouches的特殊行为可能带来的编程挑战。推荐了Apple Developer站点的相关文档作为进一步学习资源。
摘要由CSDN通过智能技术生成
水果公司的那些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
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值