移动端触摸事件touchmove的坑
作者：秋了秋 发表时间：2016年07月16日
一说到移动端触摸事件，大家的反应不就是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)
如此便能很顺滑的持续获取手指的位置坐标。
36
文章作者： “秋了秋”个人博客，本站鼓励原创。
转载请注明本文地址：http://netblog.cn/blog/452.html