手机端html touch事件,移动端触摸事件touchmove的坑

一说到移动端触摸事件，大家的反应不就是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

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

content.innerHTML="由于你向上滑动了一段距离，所以我要插入内容了";

}else{

content.innerHTML="";

}

},false)

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