該文章轉載自touch.js詳解
Touch
在開發移動端的應用中會使用到很多的手勢操作，例如一指拖動、兩指旋轉等等，爲了方便開放者快速集成這些手勢，在Clouda中內置了事件和手勢庫Library.touch，下面將詳細的介紹如何使用Library.touch。
手勢事件處理類API目前支持以下功能：
- 事件配置
- 事件代理
- 事件綁定
- 解除事件代理
- 解除事件綁定
- 觸發事件
事件配置
touch.config(config)功能描述：
對手勢事件庫進行全局配置。
參數描述：
config爲一個對象
{ tap: true, //tap類事件開關, 默認爲true doubleTap: true, //doubleTap事件開關， 默認爲true hold: true, //hold事件開關, 默認爲true holdTime: 650, //hold時間長度 swipe: true, //swipe事件開關 swipeTime: 300, //觸發swipe事件的最大時長 swipeMinDistance: 18, //swipe移動最小距離 swipeFactor: 5, //加速因子, 值越大變化速率越快 drag: true, //drag事件開關 pinch: true, //pinch類事件開關 }
事件代理
touch.on( delegateElement, types, selector, callback );功能描述：
事件代理方法。
參數描述：
| 參數 | 類型 | 描述 |
|---|---|---|
| delegateElement | element或string | 事件代理元素或選擇器 |
| types | string | 手勢事件的類型, 可接受多個事件以空格分開；支持原生事件的透傳。目前支持的具體事件類型，詳見《手勢事件類型》。 |
| selector | string | 代理子元素選擇器, |
| callback | function | 事件處理函數，如需瞭解手勢庫支持的新屬性，詳見《事件對象》 |
**
手勢事件類型
**
支持的手勢事件類型：
| 分類 | 參數 | 描述 |
|---|---|---|
| 縮放 | pinchstart | 縮放手勢起點 |
| pinchend | 縮放手勢終點 | |
| pinch | 縮放手勢 | |
| pinchin | 收縮 | |
| pinchout | 放大 | |
| 旋轉 | rotateleft | 向左旋轉 |
| rotateright | 向右旋轉 | |
| rotate | 旋轉 | |
| 滑動 | swipestart | 滑動手勢起點 |
| swiping | 滑動中 | |
| swipeend | 滑動手勢終點 | |
| swipeleft | 向左滑動 | |
| swiperight | 向右滑動 | |
| swipeup | 向上滑動 | |
| swipedown | 向下滑動 | |
| swipe | 滑動 | |
| 拖動開始 | dragstart | 拖動屏幕 |
| 拖動 | drag | 拖動手勢 |
| 拖動結束 | dragend | 拖動屏幕 |
| 拖動 | drag | 拖動手勢 |
| 長按 | hold | 長按屏幕 |
| 敲擊 | tap | 單擊屏幕 |
| doubletap | 雙擊屏幕 |
更多使用實例請參考http://code.baidu.com
**
事件對象
**
事件處理函數的第一個參數爲事件對象，除了原生屬性之外，百度手勢庫還提供了部分新屬性。
以下爲手勢新增的屬性：
| 屬性 | 描述 |
|---|---|
| originEvent | 觸發某事件的原生對象 |
| type | 事件的名稱 |
| rotation | 旋轉角度 |
| scale | 縮放比例 |
| direction | 操作的方向屬性 |
| fingersCount | 操作的手勢數量 |
| position | 相關位置信息, 不同的操作產生不同的位置信息 |
| distance | swipe類兩點之間的位移 |
| distanceX, x | 手勢事件x方向的位移值, 向左移動時爲負數 |
| distanceY, y | 手勢事件y方向的位移值, 向上移動時爲負數 |
| angle | rotate事件觸發時旋轉的角度 |
| duration | touchstart 與 touchend之間的時間戳 |
| factor | swipe事件加速度因子 |
| startRotate | 啓動單指旋轉方法，在某個元素的touchstart觸發時調用 |
事件綁定
touch.on( element, types, callback );功能描述：
事件綁定方法，根據參數區分事件綁定和事件代理。
參數描述：
| 參數 | 類型 | 描述 |
|---|---|---|
| element | element或string | 事件綁定元素或選擇器 |
| types | string | 事件的類型, 可接受多個事件以空格分開，支持原生事件的透傳。具體參數說明，同“事件代理”方法中的“types”參數說明。 |
| callback | function | 事件處理函數，具體參數說明，同“事件代理”方法中的“callback”參數說明。 |
解除事件代理
touch.off( delegateElement, types, selector, callback )功能描述：
解除某元素上的事件代理。
參數描述：
| 參數 | 類型 | 描述 |
|---|---|---|
| delegateElement | element或string | 元素對象或選擇器 |
| types | string | 事件的類型，具體參數說明，同“事件代理”方法中的“types”參數說明。 |
| selector | string | 代理子元素選擇器 |
| callback | function | 事件處理函數, 移除函數與綁定函數必須爲同一引用。具體參數說明，同“事件代理”方法中的“callback”參數說明。 |
解除事件綁定
touch.off( element, types, callback )功能描述：
解除某元素上的事件綁定，根據參數區分事件綁定和事件代理。
參數描述：
| 參數 | 類型 | 描述 |
|---|---|---|
| element | element或string | 元素對象、選擇器 |
| types | string | 事件的類型，具體參數說明，同“事件代理”方法中的“types”參數說明。 |
| callback | function | 事件處理函數, 移除函數與綁定函數必須爲同一引用;具體參數說明，同“事件代理”方法中的“callback”參數說明。 |
觸發事件
touch.trigger(element, type);功能描述：
觸發某個元素上的某事件。
參數描述：
| 參數 | 類型 | 描述 |
|---|---|---|
| element | element或string | 元素對象或選擇器 |
| type | string | 事件的類型，具體參數說明，同“事件代理”方法中的“types”參數說明。 |