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
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类事件开关
}
百度touch.js可以说是Web移动端touch点击事件不错的解决方案,搭配zepto.js或者jQuery使用起来解决了移动端click点击事件300ms的延迟问题。
近期touch.js百度官方网站突然无法访问了,不知道到底是什么原因。官网地址:http://touch.code.baidu.com/
不过值得庆幸的是,百度官方在Clouda项目的文档说明中还有留有关于touch.js的说明文档,详见:http://cloudajs.org/docs/step4_API_Documentation#h2_7
不过touch.js上手还是很容易的,语法:
touch.on(‘#btn-ok’,’tap’,function(ev){
//这里是你想要执行的操作,随便写
})
上面是一个简单的tap操作,touch.js还支持滑动、缩放等等手势操作,详细的手势事件如下:
touch.js支持的手势事件类型:
分类 | 参数 | 描述 |
---|---|---|
缩放 | pinchstart | 缩放手势起点 |
~ | pinchend | 缩放手势终点 |
~ | pinch | 缩放手势 |
~ | pinchin | 收缩 |
~ | pinchout | 放大 |
旋转 | rotateleft | 向左旋转 |
~ | rotateright | 向右旋转 |
~ | rotate 旋 | 转 |
滑动 | swipestart | 滑动手势起点 |
~ | swiping | 滑动中 |
~ | swipeend | 滑动手势终点 |
~ | swipeleft | 向左滑动 |
~ | swiperight | 向右滑动 |
~ | swipeup | 向上滑动 |
~ | swipedown | 向下滑动 |
~ | swipe | 滑动 |
拖动开始 | dragstart | 拖动屏幕 |
拖动 | drag | 拖动手势 |
拖动结束 | dragend | 拖动屏幕 |
拖动 | drag | 拖动手势 |
长按 | hold | 长按屏幕 |
敲击 | tap | 单击屏幕 |
~ | doubletap | 双击屏幕 |
事件代理
touch.on( delegateElement, types, selector, callback );
功能描述
事件代理方法。
参数描述
参数 | 类型 | 描述 |
---|---|---|
delegateElement | element或string | 事件代理元素或选择器 |
types | string | 手势事件的类型, 可接受多个事件以空格分开;支持原生事件的透传。目前支持的具体事件类型,详见《手势事件类型》。 |
selector | string | 代理子元素选择器, |
callback | function | 事件处理函数,如需了解手势库支持的新属性,详见《事件对象》 |
事件配置
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类事件开关
}
事件对象
事件处理函数的第一个参数为事件对象,除了原生属性之外,百度手势库还提供了部分新属性。
以下为手势新增的属性:
属性 | 描述 |
---|---|
originEvent | 触发某事件的原生对象 |
type | 事件的名称 |
rotation | 旋转角度 |
scale | 缩放比例 |
direction | 操作的方向属性 |
fingersCount | 操作的手势数量 |
position | 相关位置信息, 不同的操作产生不同的位置信息 |
distance | swipe类两点之间的位移 |
distanceX, x | 手势事件x方向的位移值, 向左移动时为负数 |
distanceY, y | 手势事件y方向的位移值, 向上移动时为负数 |
angle | rotate事件触发时旋转的角度 |
duration | touchstart 与 touchend之间的时间戳 |
factor | swipe事件加速度因子 |
startRotate | 启动单指旋转方法,在某个元素的touchstart触发时调用 |
事件绑定
touch.on( element, types, callback );
功能描述
事件绑定方法,根据参数区分事件绑定和事件代理。
参数描述
参数 | 类型 | 描述 |
---|---|---|
element | element或string | 事件绑定元素或选择器 |
types | string | 事件的类型, 可接受多个事件以空格分开,支持原生事件的透传。具体参数说明,同“事件代理”方法中的“types”参数说明。 |
callback | function | 事件处理函数,具体参数说明,同“事件代理”方法中的“callback”参数说明。 |
解除事件代理
touch.off( delegateElement, types, selector, callback )
功能描述
解除某元素上的事件代理。
参数描述
参数 | 类型 | 描述 |
---|---|---|
delegateElement | element或string | 元素对象或选择器 |
types | string | 事件的类型,具体参数说明,同“事件代理”方法中的“types”参数说明。 |
selector | string | 代理子元素选择器 |
callback | function | 事件处理函数, 移除函数与绑定函数必须为同一引用。具体参数说明,同“事件代理”方法中的“callback”参数说明。 |
解除事件绑定
touch.off( element, types, callback )
功能描述
解除某元素上的事件绑定,根据参数区分事件绑定和事件代理。
参数描述
参数 | 类型 | 描述 |
---|---|---|
element | element或string | 元素对象、选择器 |
types | string | 事件的类型,具体参数说明,同“事件代理”方法中的“types”参数说明。 |
callback | function | 事件处理函数, 移除函数与绑定函数必须为同一引用;具体参数说明,同“事件代理”方法中的“callback”参数说明。 |
触发事件
touch.trigger(element, type);
功能描述
触发某个元素上的某事件。
参数描述
参数 | 类型 | 描述 |
---|---|---|
element | element或string | 元素对象或选择器 |
type | string | 事件的类型,具体参数说明,同“事件代理”方法中的“types”参数说明。 |
touch.js - 移动设备上的手势识别与事件库的更多相关文章
- 前端学习之touch.js与swiper学习
Touch.js是移动设备上的手势识别与事件库,改框架基于原生js,操作简单,主要分drag,swipe,rotate,scale,tab,hold,touch操作. swiper是一个移动端触摸滑动 ...
- iPhone, Android等设备上的Touch和Gesture
现在,为智能触摸手机创建直观的用户界面时,最重要的部分不再是单纯的视觉效果,而是要创建出能很好地处理用户触摸交互的界面.对于Web应用而言,这意味着使用touch事件来取代传统的mouse事件.在Do ...
- 移动端上下滑动事件之--坑爹的touch.js
下面的方法,不知道是操作方法不对还是啥. 在 zepto.js 里面加那一段代码不起作用 百度的 touch.js 是可以用的,但是使用方式 和 zepto有点不一样. 解决方案:参照这个链接地址 ...
- 移动端上下滑动事件之--坑爹的touch.js
原文 http://blog.csdn.net/minidrupal/article/details/39611605 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和htm ...
- 获得touch事件,jquery绑定事件监听器,ios设备上打开touch状态以响应focus,active等伪类
2. 默认的监听方式 document.addEventListener('touchstart', function(){ alert('hello'); }, false); 使用jquery时 ...
- 【转】使IFRAME在iOS设备上支持滚动
原文链接: Scroll IFRAMEs on iOS原文日期: 2014年07月02日 翻译日期: 2014年07月10日翻译人员: 铁锚 很长时间以来, iOS设备上Safari中超出边界的元素将 ...
- 使IFRAME在iOS设备上支持滚动
原文链接: Scroll IFRAMEs on iOS原文日期: 2014年07月02日 翻译日期: 2014年07月10日翻译人员: 铁锚很长时间以来, iOS设备上Safari中超出边界的元素将不 ...
- 作IFRAME于iOS您的设备上支持滚动
原文链接: Scroll IFRAMEs on iOS原始日期: 2014年07一个月02日本 翻译日期: 2014年07月10日翻译人员: 铁锚 非常长时间以来, iOS设备上Safari中超出边界 ...
- 在本地调试移动设备上的页面——神器weinre介绍
平时写代码,最喜欢用chrome的developer Tool调试页面了,基本是离不了的工具.但是当页面需要在移动设备上使用,尤其是被嵌入到Hybird APP中时,由于移动版的chrome没有dev ...
随机推荐
- 黄聪:table自适应宽度和高度
自适应宽度: td { width: 1px; white-space: nowrap; /* 自适应宽度*/ word-break: keep-all; /* 避免长单词截断,保持全部 */ } 自 ...
- oracle 关联更新
不多说了,我们来做实验吧. 创建如下表数据 select * from t1 ; select * from t2; 现需求:参照T2表,修改T1表,修改条件为两表的fname列内容一致. 方式1,u ...
- bootstrap 自定义模态窗口
$(".classname").click(function () { $('#mymodel').modal('show'); alert('模态框打开了'); }); $('# ...
- SmtpClient发送邮件时附件名称乱码
在用户环境发现一个现象,使用System.Net.Mail.SmtpClient发送邮件,当附件名包含中文且长度较长时,最终的邮件里附件名会乱掉,写个简单的测试程序: var mail = new M ...
- Python爬取知乎上搞笑视频,一顿爆笑送给大家
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:Huangwei AI 来源:Python与机器学习之路 PS:如有需 ...
- 1G内存VPS安装 mysql5.6 经常挂
背景介绍 去年3月份的时候参加了腾讯云主机活动,5年362,非常优惠.当时的想法是买来可以瞎整一波,虽然配置不高,但是搞点事情也够用. 配置如下,上海机房 1 核 1 GB 1 Mbps 系统盘:普通 ...
- 配置git远程连接gitlab
1.本地git下载 2.配置全局的用户名和邮箱,命令分别为 git config --global user.name "username" git config --global ...
- VectorMap.js 矢量地图库 – 快速入门
VectorMap.js是一个开源地图渲染JavaScript库, 可以使用WebGL或者HTML5两种方式进行交互式矢量地图 (包括“矢量瓦片地图”,一般性矢量数据地图)和 栅格瓦片地图的渲染. W ...
- [20190913]完善vim的bccacl插件2.txt
[20190913]完善vim的bccacl插件2.txt --//继续完善vim的bccacl插件.--//\bc 计算也可以直接使用 \bb 操作,这样操作更快一些.--//增加直接写好算式计算的 ...
- mysql判断是否包含某个字符的方法和修改表中指定字段
用locate 是最快的,like 最慢.position一般实战例子:select * from historydatawhere locate('0',opennum) and locate('1 ...