手机触屏的js事件

 1 var touchFunc = function(obj,type,func) {
 2     //滑动范围在5x5内则做点击处理，s是开始，e是结束
 3     var init = {x:5,y:5,sx:0,sy:0,ex:0,ey:0};
 4     var sTime = 0, eTime = 0;
 5     type = type.toLowerCase();
 6  
 7     obj.addEventListener("touchstart",function(){
 8         sTime = new Date().getTime();
 9         init.sx = event.targetTouches[0].pageX;
10         init.sy = event.targetTouches[0].pageY;
11         init.ex = init.sx;
12         init.ey = init.sy;
13         if(type.indexOf("start") != -1) func();
14     }, false);
15  
16     obj.addEventListener("touchmove",function() {
17         event.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动
18         init.ex = event.targetTouches[0].pageX;
19         init.ey = event.targetTouches[0].pageY;
20         if(type.indexOf("move")!=-1) func();
21     }, false);
22  
23     obj.addEventListener("touchend",function() {
24         var changeX = init.sx - init.ex;
25         var changeY = init.sy - init.ey;
26         if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>init.y) {
27             //左右事件
28             if(changeX > 0) {
29                 if(type.indexOf("left")!=-1) func();
30             }else{
31                 if(type.indexOf("right")!=-1) func();
32             }
33         }
34         else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>init.x){
35             //上下事件
36             if(changeY > 0) {
37                 if(type.indexOf("top")!=-1) func();
38             }else{
39                 if(type.indexOf("down")!=-1) func();
40             }
41         }
42         else if(Math.abs(changeX)<init.x && Math.abs(changeY)<init.y){
43             eTime = new Date().getTime();
44             //点击事件，此处根据时间差细分下
45             if((eTime - sTime) > 300) {
46                 if(type.indexOf("long")!=-1) func(); //长按
47             }
48             else {
49                 if(type.indexOf("click")!=-1) func(); //当点击处理
50             }
51         }
52         if(type.indexOf("end")!=-1) func();
53     }, false);
54 };

 1 //捕获手势事件(与捕捉鼠标事件是一样的，只需要添加一个监听器就好了)====添加一个事件监听addEventListener
 2 /**
 3 *在document下面监听touchstart和touchend这两个事件
 4 *touches[]是一个数组，多点触控，此处只需要在2048中采用单点触控即可
 5 *
 6 */
 7 var startx=0,starty=0,endx = 0,endy = 0;
 8 document.addEventListener(‘touchstart‘,function(event){
 9     startx = event.touches[0].pageX;//获取屏幕X的位置；
10     starty = event.touches[0].pageY;
11 });
12 document.addEventListener(‘touchmove‘,function(event){
13     event.preventDefault();//阻止触摸时浏览器的缩放，滚动条滚动
14 });
15 document.addEventListener(‘touchend‘,function(event){
16     endx = event.changedTouches[0].pageX;
17     endy = event.changedTouches[0].pageY;
18 
19     //声明两个变量来保存向量
20     var subx = endx-startx;
21     var suby = endy-starty;
22     if (Math.abs(subx)<0.3*documentWidth && Math.abs(suby)<0.3*documentWidth) {
23         return;//处理小范围滑动，不操作，即容错处理
24     };
25     //触控事件的逻辑===上滑，下滑，左滑，右滑；
26     /*
27     *注意：在移动手机端中，纵坐标向下为正。
28     */
29     if (Math.abs(subx)>=Math.abs(suby)) {
30         //横坐标移动范围比纵坐标移动范围广
31         if (subx>0) {
32             //右滑
33             if (moveRight()) {
34                 setTimeout("generateOneNumber()",210);
35                 setTimeout("isgameover()",300);
36             };
37         } else{
38             //左滑
39             if (moveLeft()) {
40                 setTimeout("generateOneNumber()",210);
41                 setTimeout("isgameover()",300);
42             };
43         };
44     } else{//纵坐标移动范围比横坐标移动范围广
45         if (suby>0) {
46             //下滑
47             if (moveDown()) {
48                 setTimeout("generateOneNumber()",210);
49                 setTimeout("isgameover()",300);
50             };
51         } else{
52             //上滑
53             if (moveUp()) {
54                 setTimeout("generateOneNumber()",210);
55                 setTimeout("isgameover()",300);
56             };
57         };
58     };
59 
60 });