指尖下的js —— 多触式web前端开发之二:处理手势
http://www.cnblogs.com/pifoo/archive/2011/05/23/webkit-touch-event-2.html
指尖下的js —— 多触式web前端开发之二:处理简单手势
这篇文章将描述多触式网页开发中对手势(Gesture)事件的处理。
水果设备中的Gesture,广义的说包括手指点击(click),轻拂(flick),双击(double-click),两只手指的分开、闭合(scale)、转动(rotate)等一切手指能在屏幕上做的事情。iOS上设计了了一系列手势来模拟和扩展鼠标操作,比如手指放下后迅速提起会触发click事件,手指向上滑动,停止,会触发body的onscroll事件等等。但是,狭义的Gesture事件,也就是能够addEventListener的GestureEvent对象,却并不是一个非常强大的存在,它只在有两根或多根手指放在屏幕上的时候触发,并且只包含手指分开比例(scale)和手指转动角度(rotation)信息。对于其他各种常用的手势,我们必须利用别的事件来处理。
下面从单根手指的事件开始说起。。。
我们先来考虑一个最简单的手势,手指放下后迅速提起,这个手势做出来后会发生什么?大家当然会想到click,其实在click发生以前,还有很多事情发生,请看下图:
这里先解释一下什么是clickable element,就是一个绑定了click, mousedown, mouseup, mousemove事件
的任何html element(注意,没有绑定事件处理的element不算clickable element)。从这张图可以看出,手
指提起的一刹那,首先触发的并不是click事件,而是mouseover和mousemove。然后,系统会判断接收到事
件的element的内容是否被改变,如果内容被改变,接下来的事件都不会触发,如果没有改变,会按照
mousedown,mouseup,click的顺序触发事件。什么?你问mouseout在哪?这个事件的处理,比较尴尬,
上面说的一系列事件都完了以后,如果你再点击一个clickable element,就会触发上一个clickable element的
mouseout事件了。。。比较纠结,建议不要在多触版网页上使用mouseout。
那么,如果手指放下后不提起又会发生什么呢?什么都不会发生,没有任何事件会被触发。但是,如果对象
是一个img并且有alt属性的话,这个动作将会显示img的alt字符串。如果是一个link的话,这个动作会显示“在
新窗口打开连接”选项,但是,不会有任何用户定义事件触发。
最后一种关于单根手指的事件,是放下后滑动手指。注意,在滑动的过程当中,不会触发除touchmove以外
的任何事件(请不要试图在这时处理mousemove)。手指在滑动的时候,整个page应该会跟着移动,除非你
preventDefault了body的touchmove。当手指停下来后,page的onscroll将会触发。除此之外,没有什么我
们熟悉的事情会发生。
指尖下的js —— 多触式web前端开发之三:处理复杂手势
事件是对touch event的更高层的封装,和touch一样,它同样包括gesturestart,gesturechange,
gestureend三个事件回调:
gesturestart // 当有两根或多根手指放到屏幕上的时候触发 |
gesturechange // 当有两根或多根手指在屏幕上,并且有手指移动的时候触发 |
gestureend // 当倒数第二根手指提起的时候触发,结束gesture |
事件处理函数中会得到一个GestureEvent类型的参数,它包含了手指的scale(两根移动过程中分开的比例
)信息和rotation(两根手指间连线转动的角度)信息。
当两根或以上的手指在屏幕上活动的时候,我们可以做出一些较为复杂的手势。这将涉及到普通的mouse事
件,touch事件和gesture事件,情况比较复杂。touch已经在第一篇文章里详细介绍,这里就简单带过。
我们还是先看看当分别将两根手指放到屏幕上的时候,会触发哪些事件吧:
1、第一根手指放下,触发touchstart,除此之外什么都不会发生(请参照第二篇文章,手指提起才会触发
mouse的各事件)
2、第二根手指放下,触发gesturestart
3、触发第二根手指的touchstart
4、立即触发gesturechange
5、手指移动,持续触发gesturechange,就像鼠标在屏幕上移动的时候不停触发mousemove一样
6、第二根手指提起,触发gestureend,以后将不会再触发gesturechange
7、触发第二根手指的touchend
8、触发touchstart!注意,和第一篇文章里介绍的一样,多根手指在屏幕上,提起一根,会刷新一次全局
touch!重新触发第一根手指的touchstart,这点和苹果官方网站上介绍的不同。
9、提起第一根手指,触发touchend
Gesture事件的处理和Touch类似,我们一般会在gesturechange的时候利用GestureEvent对象中的信息来
做一些事情:
var angle = event.rotation; |
var scale = event.scale; |
这样能够取得scale和rotation信息,然后我们可以:
e.target.style.webkitTransform = 'scale(' + e.scale + startScale + ') rotate(' + e.rotation + |
startRotation + 'deg)' ; |
这段代码能让element随着你的两根手指的运动而转动、伸展。以下是一段测试代码,请用
ipad/iphone/android打开: http://wanglingshu.com/wp-content/uploads/ios-gesture.html
还有一件要说明的事情是,对于复杂手势,是否会触发某些鼠标事件?确实有,不过我只找到了一个。不管
你的两根手指在屏幕上伸缩还是转动,都不会有任何鼠标事件触发,但当你的两根手指同时朝上或者朝下移动
的时候,则会触发某些事件。请看下图:
两根手指同时向上或向下滚动,如果target element是一个scrollable element(也就是绑定了mousewheel的
element)的话,将会触发mousewheel事件。如果不是scrollable element,则当手指停止移动的时候,会触
发onscoll。这里请和第二篇文章的body scroll区别一下,如果你要滚动body,只需要一根手指轻轻拂动屏幕
,但是你要滚动一个内部div或者iframe,则需要动用两根手指。 这也是多触式设备一个不太方便的地方。而对于我们开发者来说,这种不方便被放大了。。。因为从用户体
验角度来说,要求用户使用两根手指滚动一个内部element显然是不合适的,而要实现像滚动body一样用一根
手指优雅地滚动,我们必须利用touchevent,在它的回调函数中用代码来实现scroll。这里介绍一个段很不错的
多触式滚动组件:iscroll-4
http://cubiq.org/scrolling-div-on-iphone-ipod-touch
用起来很简单,new一个iScroll对象,传入需要滚动的inner element作为参数就行了。
posted on 2011-11-25 17:26 lixiang17058 阅读(286) 评论(0) 编辑 收藏 举报