1. 程式人生 > >指尖下的js —— 多觸式web前端開發之三:處理複雜手勢

指尖下的js —— 多觸式web前端開發之三:處理複雜手勢

    這篇文章著重介紹多觸式裝置上特有的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 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作為引數就行了。