touch操作

发表于   |  

触屏操作：
日常进行拖拽的效果制作中，主要使用三个触摸事件。
这些事件都依据W3C Touch Events 规范执行。

  1. touchstart 手指触屏时候触发（可以理解为鼠标事件里的onmousedown）

  2. touchmove 手指在屏幕上滑动触发，事件发生时候，屏幕会出现滚动条，需要调用event.perventdefault();阻止默认事件

  3. touchend 手指移开屏幕时触发。 （可以理解为鼠标事件里的onmouseup)

每个触摸事件都提供了鼠标事件里一样的DOM属性，在下面的例子里，我们使用的比较多的是pageX pageY这两个 （clientX 和clientY考虑到需要处理scrollTop 和scrollLeft，使用较少） 此外，在多点触摸时候，还会用到identifier ，用以标识触摸的唯一ID

除此之外，部分触摸事件中还需要用到下列的跟踪触摸的属性

targetTouches 用于多点触摸操作时候

changeTouches 用于多点触摸操作接触操作的判断执行

下面是一个多点touch的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
function drag(obj){                                                                            
    var y =0 ;      //设置初始的transform X轴位移值                                                     
    var x =0 ;      //设置初始的transform Y轴位移值                                                     
    obj.addEventListener("touchstart",function(ev){                                            
                                                                                               
        //1 将最后加入操作触控的手指定为主控                                                                   
        var disX =  ev.targetTouches[ev.targetTouches.length - 1].pageX - x;   // 确定控制的中心点到控制物体
        var disY =  ev.targetTouches[ev.targetTouches.length - 1].pageY - y;                   
                                                                                               
        //2 将触摸物体的对象id存入变量保存                                                                   
        var eleId=  ev.targetTouches[ev.targetTouches.length - 1].identifier;                  
                                                                                               
        //3 匿名函数无法解绑，所以另外命名函数，用以添加事件                                                           
        function fnMove(ev){                                                                   
            for(var i = 0 ;i < ev.targetTouches.length;i++){                                   
                if(eleId == ev.targetTouches[i].identifier){                                   
                    x = ev.targetTouches[i].pageX - disX ;                                     
                    y = ev.targetTouches[i].pageY - disY ;                                     
                                                                                               
                    //将计算出的位移变化值写入位移变化                                                         
                    obj.style.transform = "translate("+x+"px,"+y+"px)";                        
                                                                                               
                    break;                                                                     
                }                                                                              
            }                                                                                  
        }                                                                                      
                                                                                               
        //触摸结束                                                                                 
        function fnEnd() {                                                                     
            for (var i = 0; i < ev.changedTouches.length; i++) {                               
                if (eleId == ev.changedTouches[i].identifier) {                                
                    //当识别的触摸对象id与结束触摸的对象id符合一致时候                                               
                    //事件解绑                                                                     
                    obj.removeEventListener("touchmove", fnMove, false);                       
                    obj.removeEventListener("touchend", fnEnd, false);                         
                    break;                                                                     
                }                                                                              
            }                                                                                  
        }                                                                                      
        obj.addEventListener("touchmove",fnMove,false);                                        
        obj.addEventListener("touchend",fnEnd,false);                                          
                                                                                               
        ev.preventDefault();                                                                   
    },false);                                                                                  
}