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

原文地址:https://www.cnblogs.com/lguow/p/11136281.html

时间: 2024-08-02 19:44:55

touch.js - 移动设备上的手势识别与事件库的相关文章

手势识别与事件库 Touch.js若干问题及解决方法

Touch.js是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具. Touch.js的代码已托管于github并开源,希望能帮助国内更多的开发者学习和开发出优秀的App产品. Touch.js手势库专为移动设备设计, 请在Webkit内核浏览器中使用. 极速CDN <script src="http://code.baidu.com/touch-0.2.14.min.js"></script> Examples /

iPhone, Android等设备上的Touch和Gesture

现在,为智能触摸手机创建直观的用户界面时,最重要的部分不再是单纯的视觉效果,而是要创建出能很好地处理用户触摸交互的界面.对于Web应用而言,这意味着使用touch事件来取代传统的mouse事件.在Dojo 1.7中,新的touch API可以帮助您简化这一步骤. 本文是Touching and Gesturing on the iPhone的更新版,该文最早发布于2008年 引言在我们讨论Dojo 1.7中那些帮助创建可触摸界面的新功能之前,先来了解下底层的技术.概念.Apple在发布iPhon

&#31227;&#21160;&#31471;&#19978;&#19979;&#28369;&#21160;&#20107;&#20214;&#20043;--&#22353;&#29241;&#30340;touch.js

转:http://blog.csdn.net/minidrupal/article/details/39611605?utm_source=tuicool&utm_medium=referral 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和html5在手机端大放异彩。 于是乎,各式各样的简约酷炫的html5页面层出不穷,最多的就是视差滚动+css3动画。 接下来就说说自己在搞这些页面里面碰到的一个小问题-------zepto.js里面,坑爹的touch.js的上下滑动

移动端上下滑动事件之--坑爹的touch.js

原文   http://blog.csdn.net/minidrupal/article/details/39611605 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和html5在手机端大放异彩. 于是乎,各式各样的简约酷炫的html5页面层出不穷,最多的就是视差滚动+css3动画. 接下来就说说自己在搞这些页面里面碰到的一个小问题-------zepto.js里面,坑爹的touch.js的上下滑动( swipe )事件失效. 在举例之前,先科普一下如何在pc端,查看h

JS - 移动设备终端的touch事件

移动设备的大部分交互都是通过触摸touch来实现的,是因为移动设备通常会有一个电容式触摸屏(capacitive touch-sensitive screen),以捕捉用户的手指所做的交互.对于触屏的交互式网站.游戏,触摸事件是相当重要的.Apple在IOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小差距.最近一个W3C工作组正合力制定这一触摸事件规范. 简单介绍一下IOS上的浏览器(主要Safari)所支持的多触式事件模型,然后将触控(Touch)这种简单的动作升

使IFRAME在iOS设备上支持滚动

原文链接: Scroll IFRAMEs on iOS原文日期: 2014年07月02日 翻译日期: 2014年07月10日翻译人员: 铁锚 很长时间以来, iOS设备上Safari中超出边界的元素将不能滚动,处理这种问题对开发人员来说一直是种折磨. 对原文作者的博客来说,这特别让人无奈,因为demo程序都是在沙箱IFRAMEs中运行的,这是为了不影响博客网站的AJAX页面加载策略.  通过一些研究发现,只要设置两个CSS属性,以及加上一个元素,这个问题就解决了. Here we go!(译者注

在移动设备上放大图片查看图片细节的俩种方法

类似淘宝京东上的产品图,我们可以放大来看产品的具体细节.那么,在移动设备上,基于Web浏览器的这种效果又是如何实现的呢? 一.使用touchEvent来实现,关于touchEvent的一些基本知识,可以阅读文章--多点触摸网络开发 1.页面代码 <div id="warpper" class="warpper"> <div class="clearfix"></div> <div id="con

作IFRAME于iOS您的设备上支持滚动

原文链接: Scroll IFRAMEs on iOS原始日期: 2014年07一个月02日本 翻译日期: 2014年07月10日翻译人员: 铁锚 非常长时间以来, iOS设备上Safari中超出边界的元素将不能滚动,处理这样的问题对开发者来说一直是种折磨. 对原文作者的博客来说,这特别让人无奈,由于demo程序都是在沙箱IFRAMEs中执行的,这是为了不影响博客站点的AJAX页面载入策略.  通过一些研究发现,仅仅要设置两个CSS属性,以及加上一个元素,这个问题就攻克了. Here we go

【转】使IFRAME在iOS设备上支持滚动

原文链接: Scroll IFRAMEs on iOS原文日期: 2014年07月02日 翻译日期: 2014年07月10日翻译人员: 铁锚 很长时间以来, iOS设备上Safari中超出边界的元素将不能滚动,处理这种问题对开发人员来说一直是种折磨. 对原文作者的博客来说,这特别让人无奈,因为demo程序都是在沙箱IFRAMEs中运行的,这是为了不影响博客网站的AJAX页面加载策略.  通过一些研究发现,只要设置两个CSS属性,以及加上一个元素,这个问题就解决了. Here we go!(译者注