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