欢迎来到[自学php网] ①群 287460651

主页 > 网站前端 > javascript >

touch.js移动端手势插件

来源:未知    时间:2017-04-18 14:00 作者:xxadmin

[导读] 下载地址 https://github.com/Clouda-team/touch.code.baidu.com 快速预览 //swipeexampletouch.on(.target,swipeleftswiperight,function(ev){console.log(youhavedone,ev.type);}); Note Touch.js是移动设备上的手势识别与事件库, 由...

下载地址

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


快速预览

//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为一个对象

    {
        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.on( delegateElement, types, selector, callback );

功能描述:

事件代理方法。

参数描述:

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

**

手势事件类型

**

支持的手势事件类型:

分类参数描述
缩放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相关位置信息, 不同的操作产生不同的位置信息
distanceswipe类两点之间的位移
distanceX, x手势事件x方向的位移值, 向左移动时为负数
distanceY, y手势事件y方向的位移值, 向上移动时为负数
anglerotate事件触发时旋转的角度
durationtouchstart 与 touchend之间的时间戳
factorswipe事件加速度因子
startRotate启动单指旋转方法,在某个元素的touchstart触发时调用

事件绑定

touch.on( element, types, callback );

功能描述:

事件绑定方法,根据参数区分事件绑定和事件代理。

参数描述:

参数类型描述
elementelement或string事件绑定元素或选择器
typesstring事件的类型, 可接受多个事件以空格分开,支持原生事件的透传。具体参数说明,同“事件代理”方法中的“types”参数说明。
callbackfunction事件处理函数,具体参数说明,同“事件代理”方法中的“callback”参数说明。

解除事件代理

touch.off( delegateElement, types, selector, callback )

功能描述:

解除某元素上的事件代理。

参数描述:

参数类型描述
delegateElementelement或string元素对象或选择器
typesstring事件的类型,具体参数说明,同“事件代理”方法中的“types”参数说明。
selectorstring代理子元素选择器
callbackfunction事件处理函数, 移除函数与绑定函数必须为同一引用。具体参数说明,同“事件代理”方法中的“callback”参数说明。

解除事件绑定

touch.off( element, types, callback )

功能描述:

解除某元素上的事件绑定,根据参数区分事件绑定和事件代理。

参数描述:

参数类型描述
elementelement或string元素对象、选择器
typesstring事件的类型,具体参数说明,同“事件代理”方法中的“types”参数说明。
callbackfunction事件处理函数, 移除函数与绑定函数必须为同一引用;具体参数说明,同“事件代理”方法中的“callback”参数说明。

触发事件

touch.trigger(element, type);

功能描述:

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

参数描述:

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


最新文章

点击排行

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com