代码学堂(uxuew.cn)提供付费解决PHP WEB开发等技术服务,如果需要请 点击加我QQ:1662935793.
>web前端 > js教程 > 移动端触摸手势插件touch.js使用方法详解

移动端触摸手势插件touch.js使用方法详解

js教程 围观7716次 更新日期:2017-07-03 13:50:42 留下足迹

下载地址

https://github.com/Clouda-team/touch.code.baidu.com

 

快速预览

1
2
3
//swipe exampletouch.on('.target', 'swipeleft swiperight', function(ev){
    console.log("you have done", ev.type);
});

Note

Touch.js是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具.

Touch.js的代码已托管于github并开源,希望能帮助国内更多的开发者学习和开发出优秀的App产品.

Touch.js手势库专为移动设备设计, 请在Webkit内核浏览器中使用.

Touch

在开发移动端的应用中会使用到很多的手势操作,例如一指拖动、两指旋转等等,为了方便开放者快速集成这些手势,在Clouda中内置了事件和手势库Library.touch,下面将详细的介绍如何使用Library.touch。

手势事件处理类API目前支持以下功能:

  • 事件配置

  • 事件代理

  • 事件绑定

  • 解除事件代理

  • 解除事件绑定

  • 触发事件

事件配置

touch.config(config)

功能描述:

对手势事件库进行全局配置。

参数描述:

  • config为一个对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    {
        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类事件开关}

事件代理

1
touch.on( delegateElement, types, selector, callback );

功能描述:

事件代理方法。

参数描述:

参数 类型 描述
delegateElement element或string 事件代理元素或选择器
types string 手势事件的类型, 可接受多个事件以空格分开;支持原生事件的透传。目前支持的具体事件类型,详见《手势事件类型》。
selector string 代理子元素选择器,
callback function 事件处理函数,如需了解手势库支持的新属性,详见《事件对象》

**

手势事件类型

**

支持的手势事件类型:

分类 参数 描述
缩放 pinchstart 缩放手势起点
pinchend 缩放手势终点
pinch 缩放手势
pinchin 收缩
pinchout 放大
旋转 rotateleft 向左旋转
rotateright 向右旋转
rotate 旋转
滑动 swipestart 滑动手势起点
swiping 滑动中
swipeend 滑动手势终点
swipeleft 向左滑动
swiperight 向右滑动
swipeup 向上滑动
swipedown 向下滑动
swipe 滑动
拖动开始 dragstart 拖动屏幕
拖动 drag 拖动手势
拖动结束 dragend 拖动屏幕
拖动 drag 拖动手势
长按 hold 长按屏幕
敲击 tap 单击屏幕
doubletap 双击屏幕

更多使用实例请参考http://code.baidu.com

**

事件对象

**

事件处理函数的第一个参数为事件对象,除了原生属性之外,百度手势库还提供了部分新属性。

以下为手势新增的属性:

属性 描述
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”参数说明。

触发事件

1
touch.trigger(element, type);

功能描述:

触发某个元素上的某事件。

参数描述:

参数 类型 描述
element element或string 元素对象或选择器
type string 事件的类型,具体参数说明,同“事件代理”方法中的“types”参数说明。
 

转载请注明:代码学堂>web前端 > js教程 > 移动端触摸手势插件touch.js使用方法详解

喜欢 (527) or 分享 (13)