touch.js - 移動設備上的手勢識別與事件庫

Touch.js 是移動設備上的手勢識別與事件庫, 由百度雲Clouda團隊維護，也是在百度內部廣泛使用的開發工具。
Touch.js手勢庫專為移動設備設計。
Touch.js對於網頁設計師來說，是一款不錯的輔助工具，可以減少很多寫框架控制器的時間。
網頁合理使用Touch.js不但能增加網頁的美觀感，而且在節約時間，減少人力投入也有極大的幫助。

Touch.js官網： https://www.awesomes.cn/repo/Clouda-team/touchjs
github：https://github.com/Clouda-team/touchjs

1、事件綁定

touch.on(element, types, callback)

參數

事件綁定方法，根據參數區分事件綁定和事件代理。

參數名	概述
element	類型element或string， 元素對象、選擇器
types	類型string ，事件的類型（多為手勢事件），可接受多個事件以空格分開；支持原生事件的透傳
callback	類型function， 事件處理函數, 移除函數與綁定函數必須為同一引用

2、部分手勢事件

 

3、部分事件處理函數

touchstart //手指剛接觸屏幕時觸發
touchmove //手指在屏幕上移動時觸發
touchend//手指從屏幕上移開時觸發

4、事件配置

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.js可以說是Web移動端touch點擊事件不錯的解決方案，搭配zepto.js或者jQuery使用起來解決了移動端click點擊事件300ms的延遲問題。

近期touch.js百度官方網站突然無法訪問了，不知道到底是什么原因。官網地址：http://touch.code.baidu.com/

不過值得慶幸的是，百度官方在Clouda項目的文檔說明中還有留有關於touch.js的說明文檔，詳見：http://cloudajs.org/docs/step4_API_Documentation#h2_7

不過touch.js上手還是很容易的，語法：

touch.on(‘#btn-ok’,’tap’,function(ev){ //這里是你想要執行的操作，隨便寫 }) 

上面是一個簡單的tap操作，touch.js還支持滑動、縮放等等手勢操作，詳細的手勢事件如下：

touch.js支持的手勢事件類型：

 

分類	參數	描述
縮放	pinchstart	縮放手勢起點
~	pinchend	縮放手勢終點
~	pinch	縮放手勢
~	pinchin	收縮
~	pinchout	放大
旋轉	rotateleft	向左旋轉
~	rotateright	向右旋轉
~	rotate 旋	轉
滑動	swipestart	滑動手勢起點
~	swiping	滑動中
~	swipeend	滑動手勢終點
~	swipeleft	向左滑動
~	swiperight	向右滑動
~	swipeup	向上滑動
~	swipedown	向下滑動
~	swipe	滑動
拖動開始	dragstart	拖動屏幕
拖動	drag	拖動手勢
拖動結束	dragend	拖動屏幕
拖動	drag	拖動手勢
長按	hold	長按屏幕
敲擊	tap	單擊屏幕
～	doubletap	雙擊屏幕

事件代理

touch.on( delegateElement, types, selector, callback ); 

功能描述

事件代理方法。

參數描述

參數	類型	描述
delegateElement	element或string	事件代理元素或選擇器
types	string	手勢事件的類型, 可接受多個事件以空格分開；支持原生事件的透傳。目前支持的具體事件類型，詳見《手勢事件類型》。
selector	string	代理子元素選擇器,
callback	function	事件處理函數，如需了解手勢庫支持的新屬性，詳見《事件對象》

事件配置

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類事件開關 } 

事件對象

事件處理函數的第一個參數為事件對象，除了原生屬性之外，百度手勢庫還提供了部分新屬性。

以下為手勢新增的屬性：

屬性	描述
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”參數說明。