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

    一:硬解析造成的shared pool latch 争用: 每一个sql被执行之前,先要到library cache中根据hash_value查找parent cursor,这就需要先获得librar ...

  2. BZOJ1533: [POI2005]Lot-A Journey to Mars

    1533: [POI2005]Lot-A Journey to Mars Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 174  Solved: 76[S ...

  3. 构建你的第一个App

    Building Your First App 原文链接:http://developer.android.com/training/basics/firstapp/index.html 译文链接1: ...

  4. [Design Pattern] Flywight Pattern 简单案例

    Flywight Pattern, 即享元模式,用于减少对象的创建,降低内存的占用,属于结构类的设计模式.根据名字,我也将其会理解为 轻量模式. 下面是享元模式的一个简单案例. 享元模式,主要是重用已 ...

  5. 关于 IOS Runtime Runloop 2

    Runtime 也就是运行时组件,一个纯C语言写的基础库. 我们平时编写的OC代码中, 程序运行过程时, 其实最终都是转成了runtime的C语言代码 Objective-C编写出来的程序必须得到ru ...

  6. <一>初探js特效魅力之选项卡05

    初探js特效魅力05 接下来为大家介绍的选项卡的切换 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  7. shell编程(一)--常用变量及表达式

    $? 表示执行上一个命令的返回值:如果为0表示执行成功,非0表示执行失败$1.$2.... 分别表示参数1.参数2....$# 表示这个程序的参数个数$*/$@ 表示这个程序的所有参数$$ 表示这个程 ...

  8. LVS+Keepalived实现MySQL从库读操作负载均衡

    http://www.osyunwei.com/archives/7464.html (学习运维知识好站) 说明: 操作系统:CentOS 5.X 64位 MySQL主服务器:192.168.21.1 ...

  9. How to Read, Write XLSX File in Java - Apach POI Example---reference

    No matter how Microsoft is doing in comparison with Google, Microsoft Office is still the most used ...

  10. JPDA 利用Eclipse和Tomcat进行远程调试 --转

    1 编辑tomcat\bin\catalina.bat  ,添加 rem =============================================================== ...