今天,随便搜搜看到了一个新的手势库,也许能让我为现在使用者的hammer.js的手势库带来的烦恼而消除。

它是百度团队开发的,现在由百度云Clouda进行维护。

官网       http://touch.code.baidu.com/

CND的min  http://touch.code.baidu.com/touch-0.2.14.min.js

在我上一篇文章里有提到怎么去使用hammer.js的框架,他有个比较让人烦躁的缺点,就是事件绑定,每次只能绑定一个DOM元素,而且每次都需要去NEW 一个函数,大家都知道,每new一次都会在内存开辟一个新的空间,也就是他比较占用内存。

如:

var obj = new Hammer( document.getElementById('element') );

obj.on('tap',function);

如果是这样,会给我们造成比较多的麻烦。

所以今天就简单说说touch.js这个框架给我们开发带来的便利。

以下是官网给我们带来的demo。比较有趣的单手指旋转,当然这个我们可以自己通过原生的ontouch事件自己封装。

DEMO : http://touch.code.baidu.com/examples.html

我们看看它是如何给一个DOM快速选择并且绑定事件的。

代码:

touch.on(".div","tap",function);

就这样简单就能选择到所有class为div的DOM元素加了一个点击事件。

并且事件里面的this指向了发生事件的原生DOM的元素。

event对象是我们做手势里用处比较多的一个对象,如发生的距离的X/Y,发生的type等。

总之用起来相对hammer.js还是比较不错的,具体要到开发项目中看看遇见什么麻烦或者BUG才能知道。

他自带的手势事件支持有:

缩放(pinch)    旋转(rotate)   滑动(swipe)  拖动(drag)    长按(hold)     敲击/双击(tap/doubletap)

并且有简单的配置。touch.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的手势框架,touch.js的更多相关文章

  1. H5案例分享:JS手势框架 —— Hammer.js

    JS手势框架 -- Hammer.js 一.hammer.js简介 hammerJS是一个开源的,轻量级的触屏设备javascript手势库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件.允许 ...

  2. 移动端手势库Hammer.js学习

    感觉移动端原生支持的 touch.tap.swipe 几个事件好像还不够用,某些时候还会用到诸如缩放.长按等其他功能. 近日学习了一个手势库 Hammer.js,它是一个轻量级的触屏设备手势库,能识别 ...

  3. 从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件

    一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...

  4. 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例

    百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修 ...

  5. 【干货】利用MVC5+EF6搭建博客系统(四)(上)前后台页面布局页面实现,介绍使用的UI框架以及JS组件

    一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...

  6. Chrome下的语音控制框架MyVoix.js使用篇(四)

    在上一篇博文中,我为大家介绍了myvoix.js中的smart learning模块,以及何如使用该功能.(myvoix.js的源码地址会在每一篇文章末尾放出) 文本将拓展 Chrome下的语音控制框 ...

  7. CCLayer在Touch事件(Standard Touch Delegate和Targeted Touch Delegate)

    在做练习,触摸故障,看到源代码,以了解下触摸事件. 练习操作:直CClayer子类init在 this->setTouchEnabled(true); 事件处理方法覆盖 virtual bool ...

  8. 一款很便捷很实用的框架——vue.js

    Hello,大家好!今天给大家带来一款十分好用的框架--vue.js! Vue.js是一套构建用户界面的渐进式框架.它 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 ...

  9. 前端测试框架对比(js单元测试框架对比)

    前端测试框架对比(js单元测试框架对比) 本文主要目的在于横评业界主流的几款前端框架,顺带说下相关的一些内容. 测试分类 通常应用会有 单元测试(Unit tests) 和 功能测试(Function ...

随机推荐

  1. RSS新闻阅读器

    1.RSS格式结构 http://rss.sina.com.cn/blog/tech/kj.xml <?xml version="1.0" encoding="ut ...

  2. html动态编辑框

    简述: 随着在输入框中增加字符,动态矿高度增加(IE9及以上 chrome  firefox) 由于IE8 不支持oninput函数,所以不能实现此效果 事件函数: function feedDivO ...

  3. android 自定义titlebar

    首先,修改标题栏的宽度和背景,在style.xml中添加: <style> <item name="android:background">@drawabl ...

  4. 反汇编动态追踪工具Ollydbg. ALD,ddd,dbg,edb...

    Ollydbg 通常称作OD,是反汇编工作的常用工具,吾爱破解OD附带了118脱壳脚本和各种插件,功能非常强大,基本上不需要再附加安装其它插件了. 对OD的窗口签名进行了更改,从而避免被针对性检测 修 ...

  5. Linux&shell之如何控制脚本

    写在前面:案例.常用.归类.解释说明.(By Jim) Ctrl+C组合键可以生产SIGINT信号Ctrl+Z组合键生产SIGTSTP信号,停止进程后程序仍然留在内存中,能够从停止的地方继续运行. 捕 ...

  6. (2015年郑州轻工业学院ACM校赛题)H 五子棋

    我们最后选题策略失败,选到五子棋这题,没想到这题非常麻烦,最后也没做出来! 比赛结束后发了题解再做才做出来! 不得不说 这题真的很麻烦 一个需要比较细致分类讨论的题目.判定棋盘是否合法应考虑如下几种情 ...

  7. Walls POJ 1161

    参考了大牛的博客 http://blog.csdn.net/wangjian8006/article/details/7958838 题目大意: 给出n个点,在这些点中有些点是俱乐部点,并且有m个区域 ...

  8. HDU5039--Hilarity DFS序+线段树区间更新 14年北京网络赛

    题意:n个点的树,每个条边权值为0或者1, q次操作 Q 路径边权抑或和为1的点对数, (u, v)(v, u)算2个. M i修改第i条边的权值 如果是0则变成1, 否则变成0 作法: 我们可以求出 ...

  9. PHP学习之[第03讲]PHP5.4 语法、常量、变量、数据类型详解

    1.<?php echo "Hello World"; ?> 2.//注释1,#注释2,/* 注释3 */ 3.系统常量: __FILE__默认常量,是指PHP程序文件 ...

  10. Object -C self -- 笔记

    - 是实例方法,是用实例对象进行调用的:+ 是类方法,又称静态方法,是用类来调用的: @interface Person: NSObject { int _age; } - (void) setAge ...