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

指尖下的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將會觸發。除此之外,沒有什麼我
們熟悉的事情會發生。