in javascript

touchstart, touchend, touchmove 与移动互联网开发

你为移动互联网准备好了吗?

大家都可以感受到iPhone,Android,iPad带来了移动互联网革命,前端程序员们,大家准备好了吗?移动互联网早已不是那个WAP的时代,WAP基本被淘汰了,新一代的智能移动终端,都具有了标准的HTML,CSS,JS的解析能力,但是又和桌面不同,比如这样的终端是没有光标的,也就是我们平时经常用到的 mouseover这些光标相关的东西,在这些终端上是没有作用的。同时,这些终端又具有一些他们自己的特色,比如 touch 事件,因为操作全是 touch ,所以这个事件如果好好利用,在移动互联网开发中会发挥大用处的。

正好现在手里有个 Android 设备,做毕设用的,现在也想为毕设搞点新鲜内容,所以就做了对 Android 浏览器的 touch 事件的测试。说了这么多,是因为这个东西很简单,不说点废话撑下门面,那这个博文就太短了。

touth相关的事件有 touchstart,touchend,touchmove。这三个事件最重要的属性是 pageX和 pageY,表示X,Y坐标。

其中 touchstart 在开始触摸的时间激发, touchend 在触摸结束的时间激发, touchmove 这个事件比较奇怪,按道理在触摸到过程中不断激发这个事件才对,但是在我的 Android 1.5 中,在 touchstart 激发后激发一次,然后剩余的都和 touchend 差不多同时激发。

这三个事件都都有一个 timeStamp 的属性,查看 timeStamp 属性,可以看到顺序是 touchstart -> touchmove ->touchmove -> … -> touchmove ->touchend,但是在我这里测试实际看到的确是上一段中提到的那样。

现在 Android 官方也没有一个好的关于 WEB APP 的文档,不过有了 touchstart, touchend 这两个事件的 pageX,pageY,timeStamp 属性已经可以开发出好玩的东西了。比如我想让用户通过划屏幕,来做 tab 切换。

关于 touch 事件的测试,你可以用你的 iPhone,Android,iPad访问 http://lab.allenm.me/touch.html,然后触摸屏幕,看结果。注意由于为了完整展示效果,所以对屏幕宽度有要求,最好横批浏览。同时,预告一下,我以后会用 allenm.me 这个域名,等有空了做迁移。

另外附上apple 官方关于这个事件的文档.有兴趣的可以去看看,iPhone 可是支持多点触摸的,在这个文档里,我们也可以看到处理多点触摸的方法。

  1. Pingback: 代码记录