touch.js——手機端的操作手勢
TOUCH.JS手勢操作,例如一指拖動、兩指旋
基本事件:
touchstart //手指剛接觸螢幕時觸發
touchmove //手指在螢幕上移動時觸發
touchend //手指從螢幕上移開時觸發
touchcancel //觸控過程被系統取消時觸發(少用)
一、事件繫結(常用,重要)
touch.on( element, types, callback );
功能描述:事件繫結方法,根據引數區分事件繫結和事件代理。
引數描述:
引數 | 型別 | 描述 |
---|---|---|
element | element或string | 元素物件、選擇器 |
types | 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 | 雙擊螢幕 |
部分事件處理函式
屬性 | 描述 |
---|---|
originEvent | 觸發某事件的原生物件 |
type | 事件的名稱 |
rotation | 旋轉角度 |
scale | 縮放比例 |
direction | 操作的方向屬性 |
fingersCount | 操作的手勢數量 |
position | 相關位置資訊, 不同的操作產生不同的位置資訊 |
distance | swipe類兩點之間的位移 |
distanceX, x | 手勢事件x方向的位移值, 向左移動時為負數 |
distanceY, y | 手勢事件y方向的位移值, 向上移動時為負數 |
angle | rotate事件觸發時旋轉的角度 |
duration | touchstart 與 touchend之間的時間戳 |
factor | swipe事件加速度因子 |
startRotate | 啟動單指旋轉方法,在某個元素的touchstart觸發時呼叫 |
公共
<script src="http://touch.code.baidu.com/touch-0.2.14.min.js"></script>
<body>
<div id="playarea">
<img id="target" draggable="false" src="img/cloud.png" class="show" >
</div>
</body>
》旋轉rotate
》滑動swiper
》拖動drag
》單擊tap,雙擊doubletap,長按hold
touch.on('#target', 'hold tap doubletap', function(ev){ }//多個手勢同個效果,用空格隔開即可
-----------------------------------------------------------------------------------------------------------------------------------------------
二、事件配置
touch.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 | 事件處理函式,如需瞭解手勢庫支援的新屬性 |
四、解除事件代理、解除事件繫結
touch.off( delegateElement, types, selector, callback )//解除某元素上的事件代理。
touch.off( element, types, callback )//解除某元素上的事件繫結,根據引數區分事件繫結和事件代理。
五、觸發事件
touch.trigger(element, type);
功能描述:觸發某個元素上的某事件。
引數描述:同上