当前位置: 秋叶网络博客 前端编程 ◊ 移动端触摸事件touchmove的坑

移动端触摸事件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)

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

0
除非注明,文章均由 秋叶网络博客 发布,欢迎转载。
转载请注明本文地址:http://www.mizuiren.com/452.html
目录: 前端编程 | 标签: 触摸事件 | 8503次阅读