Touch.js 相關

Touch

http://cloudajs.org/docs/step4_API_Documentation#h2_7  來源

在開發移動端的應用中會使用到不少的手勢操做，例如一指拖動、兩指旋轉等等，爲了方便開放者快速集成這些手勢，在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」參數說明。