touch.js – 移动设备上的手势识别与事件库
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
加载CND库:<script src="http://code.baidu.com/touch-0.2.14.min.js"></script>
官方API:http://cloudajs.org/docs/step4_API_Documentation#h2_7
1、事件绑定
touch.on(element, types, callback)
参数
事件绑定方法,根据参数区分事件绑定和事件代理。
参数名 | 概述 |
---|---|
element | 类型element或string, 元素对象、选择器 |
types | 类型string ,事件的类型(多为手势事件),可接受多个事件以空格分开;支持原生事件的透传 |
callback | 类型function, 事件处理函数, 移除函数与绑定函数必须为同一引用 |
2、部分手势事件
3、部分事件处理函数
touchstart
//手指刚接触屏幕时触发touchmove
//手指在屏幕上移动时触发touchend
//手指从屏幕上移开时触发
4、事件配置
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类事件开关
}
更多资料请参考:官方API
http://cloudajs.org/docs/step4_API_Documentation#h2_7
公众号:青梅煮码
小程序:青梅煮码
个人博客:www.dxel.cn