分類  >  Web前端 >

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

tags:    時間:2013-12-11 12:46:19
指尖下的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作為參數就行了。 

推薦閱讀文章

Bookmark the permalink ,來源:互聯網