移动端触摸事件touchmove的坑

转载地址：http://www.mizuiren.com/452.html

一说到移动端触摸事件，大家的反应不就是touchstart，touchmove，touchend吗，相当于pc段的mousedown，mousemove，mouseup，只要是写过pc端的js的话，若不慎，往往会坑在移动端。

比如说最近我就被touchmove坑了好久好久不能自拔。我的意图是在触摸的时候获取触控的位置坐标。当初我是这么写的：

var xy=document.getElementById("xy");
var endxy=document.getElementById("end_xy");
var content=document.getElementById("content");
var x,y,end_x,end_y;
document.addEventListener("touchstart",function(evt){
   x=parseInt(touch.pageX),
   y=parseInt(touch.pageY);
   end_x=x,
   end_y=y;
   xy.innerHTML=x+","+y;
   content.innerHTML="";			
},false)
document.addEventListener("touchmove",function(evt){
   end_x=parseInt(touch.pageX),
   end_y=parseInt(touch.pageY);
   xy.innerHTML=end_x+","+end_y;
},false)
document.addEventListener("touchend",function(evt){
   var x_x=end_x-x;
   var y_y=end_y-y;
   endxy.innerHTML=x_x+","+y_y;
   document.title="x轴移动了"+x_x+" ,y轴移动了"+y_y;
   if(y_y<-50){
      content.innerHTML="由于你向上滑动了一段距离，所以我要插入内容了";
   }else{
      content.innerHTML="";
   }
},false)

发现我的手指无论如何移动都不能获取到坐标，或者断断续续而不是连续地取值，造成很多怪异的现象。
通过仔细研究发现这里面有两个坑：

其一是要想获取触控的属性（坐标），首先要获取触控的对象，移动端不像PC端只有一个指针，所以要先取一个手指的情况下e.touches[0];

其二是触摸时浏览器有个默认的事件，这个事件会阻断你的所有操作。所以在操作之前要先把默认事件除掉evt.preventDefault();否则怪异现象层出不穷。

其三是一定要用addEventListener事件绑定，不可用ontouchmove,ontouchstart,ontouchend。

所以正确的触摸事件是这样子的：

var xy=document.getElementById("xy");
var endxy=document.getElementById("end_xy");
var content=document.getElementById("content");
var x,y,end_x,end_y;
document.addEventListener("touchstart",function(evt){
   var touch=evt.touches[0];
   x=parseInt(touch.pageX),
   y=parseInt(touch.pageY);
   end_x=x,
   end_y=y;
   xy.innerHTML=x+","+y;
   content.innerHTML="";			
},false)
document.addEventListener("touchmove",function(evt){
   evt.preventDefault();
   var touch=evt.touches[0];
   end_x=parseInt(touch.pageX),
   end_y=parseInt(touch.pageY);
   xy.innerHTML=end_x+","+end_y;
},false)
document.addEventListener("touchend",function(evt){
   var x_x=end_x-x;
   var y_y=end_y-y;
   endxy.innerHTML=x_x+","+y_y;
   document.title="x轴移动了"+x_x+" ,y轴移动了"+y_y;
   if(y_y<-50){
      content.innerHTML="由于你向上滑动了一段距离，所以我要插入内容了";
   }else{
      content.innerHTML="";
   }
},false)

 

如此便能很顺滑的持续获取手指的位置坐标。