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代码
.spirit { /* 方块的class名称*/ position: absolute; width: 50px; height: 50px; background-color: red; }
然后,在body下定义一个接收事件的容器,这里body的height必须是100%才能占满整个viewport:
Html
定义touchstart的事件处理函数,并绑定事件:
Javascript代码
// define global variable var canvas = document.getElementById(“canvas”), spirit, startX, startY; // touch start listener function touchStart(event) { event.preventDefault(); if (spirit ||! event.touches.length) return; var touch = event.touches[0]; startX = touch.pageX; startY = touch.pageY; spirit = document.createElement(“div”); spirit.className = “spirit”; spirit.style.left = startX; spirit.style.top = startY; canvas.appendChild(spirit); } // add touch start listener canvas.addEventListener(“touchstart”, touchStart, false);
首先,我们将方块spirit作为一个全局对象,因为我们现在要测试单根手指所以屏幕上最好只有一个物体在移动
(等会有多触实例)。在touchStart这个事件处理函数中,我们也首先判断了是否已经产生了spirit,也就是是 否已经有一个手指放到屏幕上,如果是,直接返回。 和传统的event listener一样,多触式系统也会产生一个event对象,只不过这个对象要多出一些属性,比如 这里的event.touches,这个数组对象获得屏幕上所有的touch。注意这里的event.preventDefault(),在传统的 事件处理函数中,这个方法阻止事件的默认动作,触摸事件的默认动作是滚屏,我们不想屏幕动来动去的,所 以先调用一下这个函数。我们取第一个touch,将其pageX/Y作为spirit创建时的初始位置。接下来,我们创建 一个div,并且设置className,left,top三个属性。最后,我们把spirit对象appendChild到容器中。这样, 当第一根手指放下的时候,一个红色的,50px见方的方块就放到屏幕上了。 然后,我们要开始处理手指在屏幕上移动的事件:
Javascript代码
function touchMove(event) { event.preventDefault(); if (!spirit || !event.touches.length) return; var touch = event.touches[0], x = touch.pageX – startX, y = touch.pageY – startY; spirit.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)'; } Canvas.addEventListener(“touchmove”, touchMove, false);
在touch move listener中,我们使用webkit特有的css属性:webkitTransform来移动方块,这个属性具体怎么用请google之。建议构造面向iOS设备的网页的时候尽量使用webkit自己的特性,不但炫,更可以直接利用硬件来提高性能。 最后,我们处理touchend事件。手指提起的时候方块从屏幕上移除。
function touchEnd(event) { If (!spirit) return; canvas.removeChild(spirit); spirit = null; } canvas.addEventListener(“touchend”, touchEnd, false);
在你的ipad或者iphone上测试一下以上代码。如果不出意外的话,一个完整的多触式web程序就诞生了。。 这种事件处理模式虽然能够满足我们开发多触式网页应用的需求,但是start – move – end的流程有点繁琐, 能不能封装一些常用的动作让我们用一个event handler就能解决问题呢。没错,Gesture事件就是为了这个目 的设计出来的,它封装了手指的scale, slide, rotate等常用的动作。不过,下一章我们再来讨论这个问题。。 附件是一个更加复杂一些的例子,每根手指放下的时候都会产生一个不同颜色的方块,手指动的时候方块跟着 动,手指提起的时候方块消失,请下载查看试用。 通过附件所包含的实例,我们可以看出一些较为隐蔽的特性。首先,这里我们没有再使用event.touches取所有 touch的对象,而是使用event.changedTouches这个数组,用来取得所有跟本次事件相关的touch。但是,这 里我发现一个奇怪的特性,不知道是我的ipad有问题还是本来就是这样,就是在有多根手指放在屏幕上的时候 ,如果提起一根手指,touchend事件的changedTouches中会包含所有手指的touch对象,然后,其他几根留 在屏幕上的手指会重新触发touchstart,并刷新所有的touch对象(identifier都不一样了)。如果这是一个所有 设备都有的特性,那么将给编程者带来一些不便,不知道水果为啥要这么处理。 对touch event的介绍我们点到为止,这里给大家推荐两篇文档: 1. Safari dom additions reference 2. Safari web content guide 对于有志于开发多触式网页应用的程序员来说,apple的developer站点是一个应该经常光顾的地方。
附件:ios-multi.rar
最新评论