js的触摸事件touch

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("滑动结束");
        // })
       
       
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
       
       

        
        
       
       

下面会介绍手势事件

[js点击]JavaScript之触摸事件之touch.js详解