今天,随便搜搜看到了一个新的手势库,也许能让我为现在使用者的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. redis 源码分析

    参考: http://redisbook.readthedocs.org/en/latest/index.html http://www.databaseskill.com/3421161/ The ...

  2. 自动化测试——case编写

    简单总结一下最近项目里遇到的问题和解决的方法,可能不全,因为之前做的时候太匆忙了,很多点都没有记录下来,能记得多少是多少吧.纲巴蝶! 1. 问题:犯错误,新增case后忘记把编码也写上去了,后来跑脚本 ...

  3. Android新浪微博客户端(六)——Home界面的ListView

    原文出自:方杰|http://fangjie.info/?p=184转载请注明出处 最终效果演示:http://fangjie.info/?page_id=54该项目代码已经放到github:http ...

  4. 红领的短板:线下“O”瓶颈_财经频道_一财网

    红领的短板:线下"O"瓶颈_财经频道_一财网 红领的短板:线下"O"瓶颈

  5. oracle创建表空间,用户,授权等

    #oracle数据库安装完成后,有两个系统级的用户system 默认密码为 :managersys 默认密码为 :change_on_install #创建表空间tbs_xxxdba,初始大小1G,每 ...

  6. C primer plus 读书笔记第八章

    本章的标题是字符输入/输出和输入确认.主要内容是讨论用于I/O的标准函数. 1.getchar()和putchar() 这两个函数之前用过,我们通过这两个函数来讨论下缓冲区. #include &qu ...

  7. Mysql + keepalived 实现双主热备读写分离【转】

    Mysql + keepalived 实现双主热备读写分离 2013年6月16日frankwong发表评论阅读评论   架构图 系统:CentOS6.4_X86_64软件版本:Mysql-5.6.12 ...

  8. HDFS集群balance(3)-- 架构细节

    转载请注明博客地址:http://blog.csdn.net/suileisl HDFS集群balance,对应版本balance design 6 如需word版本,请QQ522173163联系索要 ...

  9. [week4]每周总结与工作计划

    计算机网络 TAT 小白dp 28号还有一场 背单词 背马克思 python目标80% 熟悉coursera c++模版和 仿函数 人文修养 开学数据库,itercast的sql*2 itercast ...

  10. php中运用GD库实现简单验证码

    昨天学习了运用php的GD库进行验证码的实现. 首先可以用phpinfo()函数看一下GD库有没有安装,我用的wampserver是自动给安装的. 主要的步骤是: 1.生成验证码图片 2.随机生成字符 ...