百度touch.js

百度touch.js:Web移动端touch点击事件解决方案

百度touch.js百度touch.js

百度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 双击屏幕

事件代理

功能描述:

事件代理方法。

参数描述:

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

事件配置

功能描述:

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

参数描述:

config为一个对象

**

事件对象

**

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

以下为手势新增的属性:

属性 描述
originEvent 触发某事件的原生对象
type 事件的名称
rotation 旋转角度
scale 缩放比例
direction 操作的方向属性
fingersCount 操作的手势数量
position 相关位置信息, 不同的操作产生不同的位置信息
distance swipe类两点之间的位移
distanceX, x 手势事件x方向的位移值, 向左移动时为负数
distanceY, y 手势事件y方向的位移值, 向上移动时为负数
angle rotate事件触发时旋转的角度
duration touchstart 与 touchend之间的时间戳
factor swipe事件加速度因子
startRotate 启动单指旋转方法,在某个元素的touchstart触发时调用

事件绑定

功能描述:

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

参数描述:

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

解除事件代理

功能描述:

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

参数描述:

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

解除事件绑定

功能描述:

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

参数描述:

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

触发事件

功能描述:

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

参数描述:

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

 

1 条评论

  • 百度touch.js官网怎么关闭了?附新的文档说明地址 – H5W3 2016年9月22日

    […] 这里我也把相关的说明转载到了我的博客,你也可以直接在这里查看:http://www.h5w3.com/?p=263 […]

发表评论