移动端touch事件 之 百度 touch.js 开发文档

众所周知，js原生的应用于移动端的touch事件有诸多弊端，第三方的插件有很多好用的，但是，当我想学习touch.js 的时候，到处找不到开发文档，touch.js 是百度开发的一款插件，不知道现在为什么连官网都没有了，anywey，总结了一下开发文档以及简单的用法，供大家参考。

touch.js 开发文档

自带的手势事件支持有：


缩放（pinch）    旋转（rotate）   滑动（swipe） 拖动（drag）    长按（hold）     敲击/双击（tap/doubletap）


一，对手势事件进行全局配置:
touch.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事件的用法：绑定指定元素的事件。
语法：touch.on(".div","tap",function);


参数描述：
1，element: 元素对象或选择器。,
2，types: 事件的类型, 可接受多个事件以空格分开，支持原生事件的透传, 支持的一些事件类型有:


pinchstart 双指缩放动作开始
pinchend 双指缩放动作结束
pinch 双指缩放事件
pinchin 双指向里缩小
pinchout 双指向外放大
rotateleft 向左旋转
rotateright 向右旋转
rotate 旋转事件
swipestart 单指滑动动作开始
swiping 单指滑动事件
swipeend 单指滑动动作结束
swipeleft 单指向左滑动
swiperight 单指向右滑动事件
swipeup 单指向上滑动
swipedown 单指向下滑动
swipe 单指滑动事件
drag 单指向左右拖动
hold 单指按住不放事件
tap 单指点击
doubletap 单指双击
例如旋转实例如下：


var angle = 30; 
touch.on('#rotation .target', 'touchstart', function(ev){ 
ev.startRotate(); 
ev.originEvent.preventDefault(); 
ev.originEvent.stopPropagation(); 
}); 
touch.on('#rotation .target', 'rotate', {interval: 10}, function(ev){ 
var totalAngle = angle + ev.rotation; 
if(ev.fingerStatus === 'end'){ 
angle = angle + ev.rotation; 
} 
 
this.style.webkitTransform = 'rotate(' + totalAngle + 'deg)'; 
}); 



3，options(可选): 目前可配置的参数为:


{ 
  //====采样频率 
  interval: 10,//性能参数，值越小，实时性越好， 但性能可能略差， 值越大， 性能越好。
//遇到性能问题时，可以将值设大调优，建议值设置为10。 
    //====swipe加速度因子（swipe事件专用） 
    swipeFactor: 5 //(int: 1-10)值越大，速率更快。 
} 



4，callback: 事件处理函数， 该函数接受的参数为一个gesture event object, 可访问的属性有：


originEvent //触发某事件的原生对象


type //事件的名称


rotation //旋转角度


scale //缩放比例


direction //操作的方向属性


fingersCount //操作的手势数量


position //相关位置信息, 不同的操作产生不同的位置信息。


distance //swipe类两点之间的位移


distanceX //swipe类事件x方向的位移


distanceY //swipe类事件y方向的位移


angle //swipe类事件触发时偏移角度


factor //swipe事件加速度因子


startRotate //启动单指旋转方法，在某个元素的touchstart触发时调用。


touch.live






三，touch.live事件
语法：touch.live(selector, types, options, callback)
使用方法基本上与on相同，live的第一个参数只接受css3选择器。
通过live()方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）




四，touch.off事件
语法：touch.off(element,types,callback)
解除某元素上的事件绑定。


参数描述：


element：元素对象或选择器


types：事件的类型

callback：事件处理函数

后记：对于移动端的touch事件，无论是jquery mobile还是TouchSwipe 等，其用法都是相通的，学会其中的一个，其他的都好学了。大家一起努力。