Touch.js是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具.
Touch.js的代码已托管于github并开源,希望能帮助国内更多的开发者学习和开发出优秀的App产品.
Touch.js手势库专为移动设备设计, 请在Webkit内核浏览器中使用.
极速CDN
<script src="http://code.baidu.com/touch-0.2.14.min.js"></script>
Examples
//swipe example
touch.on('.target', 'swipeleft swiperight', function(ev){
console.log("you have done", ev.type);
});
向左及向右 滑动更灵活的解决方案
参考牛人博客的代码,据说相当好用。
1(function(global,doc,factoryFn){
2 //初始化toucher主方法
3 var factory = factoryFn(global,doc);
4
5 //提供window.util.toucher()接口
6 global.util = global.util || {};
7 global.util.toucher = global.util.toucher || factory;
8
9 //提供CommonJS规范的接口
10 global.define && define(function(require,exports,module){
11 //对外接口
12 return factory;
13 });
14 })(this,document,function(window,document){
15 /**
16 * 判断是否拥有某个class
17 */
18 function hasClass(dom,classSingle){
19 return dom.className.match(new RegExp('(\\s|^)' + classSingle +'(\\s|$)'));
20 }
21
22 /**
23 * @method 向句柄所在对象增加事件监听
24 * @description 支持链式调用
25 *
26 * @param string 事件名
27 * @param [string] 事件委托至某个class(可选)
28 * @param function 符合条件的事件被触发时需要执行的回调函数
29 *
30 */
31 function ON(eventStr,a,b){
32 this._events = this._events || {};
33 var className,fn;
34 if(typeof(a) == 'string'){
35 className = a.replace(/^\./,'');
36 fn = b;
37 }else{
38 className = null;
39 fn = a;
40 }
41 //检测callback是否合法,事件名参数是否存在·
42 if(typeof(fn) == 'function' && eventStr && eventStr.length){
43 var eventNames = eventStr.split(/\s+/);
44 for(var i=0,total=eventNames.length;i<total;i++){
45
46 var eventName = eventNames[i];
47 //事件堆无该事件,创建一个事件堆
48 if(!this._events[eventName]){
49 this._events[eventName] = [];
50 }
51 this._events[eventName].push({
52 'className' : className,
53 'fn' : fn
54 });
55 }
56 }
57
58 //提供链式调用的支持
59 return this;
60 }
61
62 /**
63 * @method 事件触发器
64 * @description 根据事件最原始被触发的target,逐级向上追溯事件绑定
65 *
66 * @param string 事件名
67 * @param object 原生事件对象
68 */
69 function EMIT(eventName,e){
70 this._events = this._events || {};
71 //事件堆无该事件,结束触发
72 if(!this._events[eventName]){
73 return
74 }
75