青梅博客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)功能描述：
对手势事件库进行全局配置。
参数描述：
1. config为一个对象
百度touch.js可以说是Web移动端touch点击事件不错的解决方案，搭配zepto.js或者jQuery使用起来解决了移动端click点击事件300ms的延迟问题。
touch.js百度官网地址：http://touch.code.baidu.com/
百度官方touch.js的说明文档，详见：http://cloudajs.org/docs/step4_API_Documentation#h2_7
Touch.js上手还是很容易的，语法：
touch.on(‘#btn-ok’,’tap’,function(ev){
//这里是你想要执行的操作，随便写
})
上面是一个简单的tap操作，touch.js还支持滑动、缩放等等手势操作，详细的手势事件如下：
2. 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”参数说明。 |
公众号：青梅煮码 小程序：青梅煮码 个人博客：www.dxel.cn
