手机触屏的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()",);
};
};
}; });
上一篇:移动终端学习2:触屏原生js事件及重力感应


下一篇:jquery -- 触屏设备touch事件