移动端js触摸事件大全

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

• 原文地址：http://www.zixuephp.com/wzqd/2014_09/387.html