#touchjs插件介绍
1.Touch.js是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具.
2.Touch.js的代码已托管于github并开源,希望能帮助国内更多的开发者学习和开发出优秀的App产品.
3.Touch.js手势库专为移动设备设计, 请在Webkit内核浏览器中使用.
##1. 他自带的手势事件支持有:
分类 参数 描述
缩放 pinchstart 缩放手势起点
pinchend 缩放手势终点
pinch 缩放手势
pinchin 收缩
pinchout 放大
旋转 rotateleft 向左旋转
rotateright 向右旋转
rotate 旋转
滑动 swipestart 滑动手势起点
swiping 滑动中
swipeend 滑动手势终点
swipeleft 向左滑动
swiperight 向右滑动
swipeup 向上滑动
swipedown 向下滑动
swipe 滑动
拖动开始 dragstart 拖动屏幕
拖动 drag 拖动手势
拖动结束 dragend 拖动屏幕
拖动 drag 拖动手势
长按 hold 长按屏幕
敲击 tap 单击屏幕
doubletap 双击屏幕
*
*
##2.touchJS的语法:
语法:touch.on(元素或选择器,事件名,监听函数);
例如:
①代码touch.on(".div","tap",function);
②简单的一句代码就能选择到所有class为div的DOM元素加了一个点击事件,且事件里面的this指向了发生事件的原生DOM的元素;
③event对象是做手势里用处比较多的一个对象(如发生的距离的X/Y,发生的type)。
##3.touchJS例子
<script type="text/javascript">
var rt = 100;
touch.on(document, 'swiperight', function(ev){
var oLeft = ball1.offsetLeft;
ball1.style.left = oLeft+ rt +"px";
console.log("向右滑动.");
});
touch.on(document, 'swipeleft', function(ev){
console.log("向左滑动.");
var oLeft = ball1.offsetLeft;
ball1.style.left = oLeft - rt +"px";
});
touch.on(document,"swipeup",function() {
var oTop = ball1.offsetTop;
ball1.style.top = oTop - rt + "px";
})
touch.on(document,"swipedown",function(){
var oTop = ball1.offsetTop;
ball1.style.top = oTop + rt + "px";
})
// touch.on(document,"swipeend",function() {
// alert("滑动结束");
// })
##下面会介绍手势事件
[js点击]JavaScript之触摸事件之touch.js详解