轉載地址:http://www.cnblogs.com/pifoo/archive/2011/05/22/webkit-touch-event-3.html
這篇文章著重介紹多觸式裝置上特有的gesture event(android和iOS對這個事件的封裝大同小異)。這個
事件是對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 |