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 - 移动设备上的手势识别与事件库的更多相关文章

  1. 前端学习之touch.js与swiper学习

    Touch.js是移动设备上的手势识别与事件库,改框架基于原生js,操作简单,主要分drag,swipe,rotate,scale,tab,hold,touch操作. swiper是一个移动端触摸滑动 ...

  2. iPhone, Android等设备上的Touch和Gesture

    现在,为智能触摸手机创建直观的用户界面时,最重要的部分不再是单纯的视觉效果,而是要创建出能很好地处理用户触摸交互的界面.对于Web应用而言,这意味着使用touch事件来取代传统的mouse事件.在Do ...

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

    下面的方法,不知道是操作方法不对还是啥.  在 zepto.js 里面加那一段代码不起作用 百度的 touch.js 是可以用的,但是使用方式 和 zepto有点不一样. 解决方案:参照这个链接地址 ...

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

    原文   http://blog.csdn.net/minidrupal/article/details/39611605 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和htm ...

  5. 获得touch事件,jquery绑定事件监听器,ios设备上打开touch状态以响应focus,active等伪类

    2. 默认的监听方式 document.addEventListener('touchstart', function(){ alert('hello'); }, false); 使用jquery时 ...

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

    原文链接: Scroll IFRAMEs on iOS原文日期: 2014年07月02日 翻译日期: 2014年07月10日翻译人员: 铁锚 很长时间以来, iOS设备上Safari中超出边界的元素将 ...

  7. 使IFRAME在iOS设备上支持滚动

    原文链接: Scroll IFRAMEs on iOS原文日期: 2014年07月02日 翻译日期: 2014年07月10日翻译人员: 铁锚很长时间以来, iOS设备上Safari中超出边界的元素将不 ...

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

    原文链接: Scroll IFRAMEs on iOS原始日期: 2014年07一个月02日本 翻译日期: 2014年07月10日翻译人员: 铁锚 非常长时间以来, iOS设备上Safari中超出边界 ...

  9. 在本地调试移动设备上的页面——神器weinre介绍

    平时写代码,最喜欢用chrome的developer Tool调试页面了,基本是离不了的工具.但是当页面需要在移动设备上使用,尤其是被嵌入到Hybird APP中时,由于移动版的chrome没有dev ...

随机推荐

  1. Unity Package包内插件解锁

    起因: 新版的Unity将模块工具与游戏中的资源文件分开放置,但有一个问题,里边的插件都是只读的,无法添加内容,连创建都是灰色的orz: 要想给这些插件添加一些别的自定义功能,那基本等于做梦,而且插件 ...

  2. SpringBoot系列之@PropertySource用法简介

    SpringBoot系列之@PropertySource用法简介 继上篇博客:SpringBoot系列之@Value和@ConfigurationProperties用法对比之后,本博客继续介绍一下@ ...

  3. linux的ls命令详解

    概述 Linux ls命令用于显示指定工作目录下之内容(列出目前工作目录所含之文件及子目录). 语法 ls [-alrtAFR] [name...] 参数 -a 显示所有文件及目录 (ls内定将文件名 ...

  4. HikariCP监控指标介绍和应用

    概述 HikariCP提供了一些监控指标,他的监控指标都是基于MicroMeter提供出来的,然后支持Prometheus和Dropwizard.本次我们将讨论一下HikariCp的监控指标有哪些,为 ...

  5. php 利用curl_*测试数据并发

    工作时遇到一个数据并发问题,因为上线之前没有测试数据并发,导致有时候网络比较差的时候导致数据重复插入数据库 , 所以利用curl_*函数专门写了一个测试数据并发的测试用例,如下: function t ...

  6. Python【day 17】面向对象-成员

    类的变量分成2种: 1.成员变量 概念:在构造方法中的变量,前面带有self 作用:可以在类中不同的方法间使用 2.类变量-静态变量 概念:在类中,构造方法和普通方法之外,定义的变量 作用: 1.调用 ...

  7. 【OOM】解决思路

    一.什么是OOM? OOM就是outOfMemory,内存溢出!可能是每一个java人员都能遇到的问题!原因是堆中有太多的存活对象(GC-ROOT可达),占满了堆空间. 二.怎么解决? 1.拿到内存溢 ...

  8. SSM框架之Mybatis(2)CRUD操作

    Mybatis(2)CRUD 1.基于代理Dao实现CRUD操作 使用要求: 1.持久层接口(src\main\java\dao\IUserDao.java)和持久层接口的映射配置(src\main\ ...

  9. cmdb项目-3

    1. cmdb资产审计 2.stark组件使用 快速完成网站的一个组件,使用方式与django的admin系统类似 ,仅仅将model注册 ,就可以生成对model增删改查的页面 ,当然这里还包括了模 ...

  10. Linux中IP配置

    一.获取网卡名称 ip a ifconfig(安装net-tools后可用) 二.进入网卡配置文件所在路径 cd /etc/sysconfig/network-scripts/ 三.编辑网卡配置文件 ...