這篇文章將描述多觸式網頁開發(fā)中對手勢(Gesture)事件的處理。
水果設備中的Gesture,廣義的說包括手指點擊(click),輕拂(flick),雙擊(double-click),兩只手指的分開、閉合
(scale)、轉動(rotate)等一切手指能在屏幕上做的事情。iOS上設計了了一系列手勢來模擬和擴展鼠標操作,比如手指放下后迅速提起會觸發(fā)
click事件,手指向上滑動,停止,會觸發(fā)body的onscroll事件等等。但是,狹義的Gesture事件,也就是能夠
addEventListener的GestureEvent對象,卻并不是一個非常強大的存在,它只在有兩根或多根手指放在屏幕上的時候觸發(fā),并且只包
含手指分開比例(scale)和手指轉動角度(rotation)信息。對于其他各種常用的手勢,我們必須利用別的事件來處理。
下面從單根手指的事件開始說起。。。
我們先來考慮一個最簡單的手勢,手指放下后迅速提起,這個手勢做出來后會發(fā)生什么?大家當然會想到click,其實在click發(fā)生以前,還有很多事情發(fā)生,請看下圖:
這里先解釋一下什么是clickable element,就是一個綁定了click, mousedown, mouseup, mousemove事件
的任何html element(注意,沒有綁定事件處理的element不算clickable element)。從這張圖可以看出,手
指提起的一剎那,首先觸發(fā)的并不是click事件,而是mouseover和mousemove。然后,系統(tǒng)會判斷接收到事
件的element的內容是否被改變,如果內容被改變,接下來的事件都不會觸發(fā),如果沒有改變,會按照
mousedown,mouseup,click的順序觸發(fā)事件。什么?你問mouseout在哪?這個事件的處理,比較尷尬,
上面說的一系列事件都完了以后,如果你再點擊一個clickable element,就會觸發(fā)上一個clickable element的
mouseout事件了。。。比較糾結,建議不要在多觸版網頁上使用mouseout。
那么,如果手指放下后不提起又會發(fā)生什么呢?什么都不會發(fā)生,沒有任何事件會被觸發(fā)。但是,如果對象
是一個img并且有alt屬性的話,這個動作將會顯示img的alt字符串。如果是一個link的話,這個動作會顯示“在
新窗口打開連接”選項,但是,不會有任何用戶定義事件觸發(fā)。
最后一種關于單根手指的事件,是放下后滑動手指。注意,在滑動的過程當中,不會觸發(fā)除touchmove以外
的任何事件(請不要試圖在這時處理mousemove)。手指在滑動的時候,整個page應該會跟著移動,除非你
preventDefault了body的touchmove。當手指停下來后,page的onscroll將會觸發(fā)。除此之外,沒有什么我
們熟悉的事情會發(fā)生。