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){ }//多個手勢同個效果，用空格隔開即可
事件(包括鼠標事件)發生的順序如下：
(1)touchstart
(2)mouseover
(3)mousemove(一次)
(4)mousedown
(5)mouseup
(6)click
(7)touchend