社区首页 >专栏 >Touch 移动设备上的手势识别与 Js事件库

Touch 移动设备上的手势识别与 Js事件库

青梅煮码

发布于 2023-01-14 08:29:14

4.8K00

代码可运行

文章被收录于专栏：青梅煮码青梅煮码

运行总次数：0

代码可运行

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)

功能描述： 对手势事件库进行全局配置。

参数描述：

1. 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://cloudajs.org/docs/step4_API_Documentation#h2_7

Touch.js上手还是很容易的，语法：

touch.on(‘#btn-ok’,’tap’,function(ev){
 
//这里是你想要执行的操作，随便写
})

上面是一个简单的tap操作，touch.js还支持滑动、缩放等等手势操作，详细的手势事件如下：

2. 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”参数说明。