手机触屏的js事件

处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件：

    1.touchstart:  // 手指放到屏幕上的时候触发 

    2.touchmove:  // 手指在屏幕上移动的时候触发 

    3.touchend:  // 手指从屏幕上拿起的时候触发 

    4touchcancel:  // 系统取消touch事件的时候触发。至于系统什么时候会取消，不详

属性

    1.client / clientY：// 触摸点相对于浏览器窗口viewport的位置 

    2.pageX / pageY：// 触摸点相对于页面的位置 

    3.screenX /screenY：// 触摸点相对于屏幕的位置 

    4.identifier： // touch对象的unique ID 

 

//touchstart事件  

function touchSatrtFunc(e) {  

    //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等  

    var touch = e.touches[0]; //获取第一个触点  

    var x = Number(touch.pageX); //页面触点X坐标  

    var y = Number(touch.pageY); //页面触点Y坐标  

    //记录触点初始位置  

    startX = x;  

    startY = y;  

}  

//touchmove事件 

function touchMoveFunc(e) {  

    //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等  

    var touch = evt.touches[0]; //获取第一个触点  

    var x = Number(touch.pageX); //页面触点X坐标  

    var y = Number(touch.pageY); //页面触点Y坐标  

    var text = 'TouchMove事件触发：（' + x + ', ' + y + '）';  

    //判断滑动方向  

    if (x - startX != 0) {  

        //左右滑动  

    }  

    if (y - startY != 0) {  

        //上下滑动  

    }  

}  

 

 

一、手机上的触摸事件

 

基本事件：

 

touchstart   //手指刚接触屏幕时触发

touchmove    //手指在屏幕上移动时触发

touchend     //手指从屏幕上移开时触发

 

下面这个比较少用：

touchcancel  //触摸过程被系统取消时触发

每个事件都有以下列表，比如touchend的targetTouches当然是 0 咯：

 

touches         //位于屏幕上的所有手指的列表

targetTouches   //位于该元素上的所有手指的列表

changedTouches  //涉及当前事件的所有手指的列表

 

我们来看几个关键的地方：

changedTouches/touches/targetTouches

touches：为屏幕上所有手指的信息

PS：因为手机屏幕支持多点触屏，所以这里的参数就与手机有所不同

targetTouches：手指在目标区域的手指信息

changedTouches：最近一次触发该事件的手指信息

比如两个手指同时触发事件，2个手指都在区域内，则容量为2，如果是先后离开的的话，就会先触发一次再触发一次，这里的length就是1，只统计最新的

PS：一般changedTouches的length都是1

touchend时，touches与targetTouches信息会被删除，changedTouches保存的最后一次的信息，最好用于计算手指信息
这里要使用哪个数据各位自己看着办吧，我也不是十分清晰（我这里还是使用changedTouches吧）

 

复制代码

其中坐标常用pageX,pageY：

pageX    //相对于页面的 X 坐标

pageY    //相对于页面的 Y 坐标

clientX  //相对于视区的 X 坐标

clientY  //相对于视区的 Y 坐标

screenX  //相对于屏幕的 X 坐标

screenY  //相对于屏幕的 Y 坐标

 

identifier // 当前触摸点的惟一编号

target   //手指所触摸的 DOM 元素

复制代码

其他相关事件：

 

event.preventDefault（）   //阻止触摸时浏览器的缩放、滚动条滚动

var supportTouch = "createTouch" in document  //判断是否支持触摸事件

更多深入内容？点击：http://www.cesclub.com/bw/jishuzhongxin/Webjishu/2011/1216/18069.html

 

 

 

二、示例

 

以下是获取不同类型滑动的代码具体做法，结合前人的思想，封装好了，可以借鉴学习：

 var touchFunc = function(obj,type,func) {
     //滑动范围在5x5内则做点击处理，s是开始，e是结束
     var init = {x:,y:,sx:,sy:,ex:,ey:};
     var sTime = , eTime = ;
     type = type.toLowerCase();

     obj.addEventListener("touchstart",function(){
         sTime = new Date().getTime();
         init.sx = event.targetTouches[].pageX;
         init.sy = event.targetTouches[].pageY;
         init.ex = init.sx;
         init.ey = init.sy;
         if(type.indexOf("start") != -) func();
     }, false);

     obj.addEventListener("touchmove",function() {
         event.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动
         init.ex = event.targetTouches[].pageX;
         init.ey = event.targetTouches[].pageY;
         if(type.indexOf("move")!=-) func();
     }, false);

     obj.addEventListener("touchend",function() {
         var changeX = init.sx - init.ex;
         var changeY = init.sy - init.ey;
         if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>init.y) {
             //左右事件
             if(changeX > ) {
                 if(type.indexOf("left")!=-) func();
             }else{
                 if(type.indexOf("right")!=-) func();
             }
         }
         else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>init.x){
             //上下事件
             if(changeY > ) {
                 if(type.indexOf("top")!=-) func();
             }else{
                 if(type.indexOf("down")!=-) func();
             }
         }
         else if(Math.abs(changeX)<init.x && Math.abs(changeY)<init.y){
             eTime = new Date().getTime();
             //点击事件，此处根据时间差细分下
             if((eTime - sTime) > ) {
                 if(type.indexOf("long")!=-) func(); //长按
             }
             else {
                 if(type.indexOf("click")!=-) func(); //当点击处理
             }
         }
         if(type.indexOf("end")!=-) func();
     }, false);
 };

完整的触控事件

 //捕获手势事件(与捕捉鼠标事件是一样的，只需要添加一个监听器就好了)====添加一个事件监听addEventListener
 /**
 *在document下面监听touchstart和touchend这两个事件
 *touches[]是一个数组，多点触控，此处只需要在2048中采用单点触控即可
 *
 */
 var startx=,starty=,endx = ,endy = ;
 document.addEventListener('touchstart',function(event){
     startx = event.touches[].pageX;//获取屏幕X的位置；
     starty = event.touches[].pageY;
 });
 document.addEventListener('touchmove',function(event){
     event.preventDefault();//阻止触摸时浏览器的缩放，滚动条滚动
 });
 document.addEventListener('touchend',function(event){
     endx = event.changedTouches[].pageX;
     endy = event.changedTouches[].pageY;

     //声明两个变量来保存向量
     var subx = endx-startx;
     var suby = endy-starty;
     if (Math.abs(subx)<0.3*documentWidth && Math.abs(suby)<0.3*documentWidth) {
         return;//处理小范围滑动，不操作，即容错处理
     };
     //触控事件的逻辑===上滑，下滑，左滑，右滑；
     /*
     *注意：在移动手机端中，纵坐标向下为正。
     */
     if (Math.abs(subx)>=Math.abs(suby)) {
         //横坐标移动范围比纵坐标移动范围广
         if (subx>) {
             //右滑
             if (moveRight()) {
                 setTimeout("generateOneNumber()",);
                 setTimeout("isgameover()",);
             };
         } else{
             //左滑
             if (moveLeft()) {
                 setTimeout("generateOneNumber()",);
                 setTimeout("isgameover()",);
             };
         };
     } else{//纵坐标移动范围比横坐标移动范围广
         if (suby>) {
             //下滑
             if (moveDown()) {
                 setTimeout("generateOneNumber()",);
                 setTimeout("isgameover()",);
             };
         } else{
             //上滑
             if (moveUp()) {
                 setTimeout("generateOneNumber()",);
                 setTimeout("isgameover()",);
             };
         };
     };

 });