touch.js的一些API
實在沒看到轉載按鈕在哪裡，直接複製過來了，格式都沒整理，看原文比較清晰，這裡太混亂
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);
功能描述：觸發某個元素上的某事件。
引數描述：同上
---------------------
作者：大小都是愁
來源：CSDN
原文：https://blog.csdn.net/wangjiaohome/article/details/49364177
版權宣告：本文為博主原創文章，轉載請附上博文連結！