手机触屏的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
二、示例
以下是获取不同类型滑动的代码具体做法,结合前人的思想,封装好了,可以借鉴学习:
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 });