标签：左右 类型 不同 com pre 系统 坐标 client ini
基本事件：
touchstart //手指刚接触屏幕时触发
touchmove //手指在屏幕上移动时触发
touchend //手指从屏幕上移开时触发
下面这个比较少用：
touchcancel //触摸过程被系统取消时触发
每个事件都有以下列表，比如touchend的targetTouches当然是 0 咯：
touches //位于屏幕上的所有手指的列表
targetTouches //位于该元素上的所有手指的列表
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 };
标签：左右 类型 不同 com pre 系统 坐标 client ini
原文地址：http://www.cnblogs.com/ysx215/p/6932609.html
