JS移动端获取触控位置

转自：http://zhidao.baidu.com/link?url=J0GvqEBrOpfJsfrLd9ee59lkxzSUuXy2f989zl4iNEx91SjyJdr8ewu0ezj9n4mvyoCYFZxWUgi6d8BmCinLDoQwJf9rRdh5jEPY49yrEva

想在touchmove事件里监听手指按下的坐标，event.pageX获取的是undefined，changedTouches，targetTouches，touches也只获得到了鼠标按下时的坐标，没法持续监听，求帮助！或者其他办法也行，效果大概是一个元素，手指在上面滑动，然后改变这个元素的top之类的，这个改变是在手指滑动的过程中变化的。

提问者采纳

//禁用手机默认的触屏滚动行为

document.addEventListener( 'touchmove' ,  function (event) {

     event.preventDefault();

},  false );

//touchstart事件

function  touchSatrtFunc(evt) {

     try  {

         //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等

 

         var  touch = evt.touches[0];  //获取第一个触点

         var  x = Number(touch.pageX);  //页面触点X坐标

         var  y = Number(touch.pageY);  //页面触点Y坐标

         //记录触点初始位置

         startX = x;

         startY = y;

 

 

     }  catch  (e) {

         alert( 'touchSatrtFunc：'  + e.message);

     }

}

 

//touchmove事件，这个事件无法获取坐标

function  touchMoveFunc(evt) {

     try  {

         //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等

         var  touch = evt.touches[0];  //获取第一个触点

         var  x = Number(touch.pageX);  //页面触点X坐标

         var  y = Number(touch.pageY);  //页面触点Y坐标

 

 

//document.getElementById("version").innerHTML = "原:"+startY+"   "+"现:"+y;

         //判断滑动方向 上下

         

         if  (y - startY > 100) {

             swipeDown(); //你自己的方法 我是用来翻页的一样的

         }  else  if (y - startY < -100){

             swipeUp(); //你自己的方法

         }

     }  catch  (e) {

         alert( 'touchMoveFunc：'  + e.message);

     }

}

 

//touchend事件

function  touchEndFunc(evt) {

     try  {

         //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等

 

 

     }  catch  (e) {

         alert( 'touchEndFunc：'  + e.message);

     }

}

 

//绑定事件

function  bindEvent() {

     document.addEventListener( 'touchstart' , touchSatrtFunc,  false );

     document.addEventListener( 'touchmove' , touchMoveFunc,  false );

     document.addEventListener( 'touchend' , touchEndFunc,  false );

}

 

//判断是否支持触摸事件

function  isTouchDevice() {

     //document.getElementById("version").innerHTML = navigator.appVersion;

 

     try  {

         document.createEvent( "TouchEvent" );

         //alert("支持TouchEvent事件！");

 

         bindEvent();  //绑定事件

     }  catch  (e) {

         alert( "不支持TouchEvent事件！"  + e.message);

     }

}

追问

touchmove事件无法获取坐标那怎么持续监听？

回答

可以啊,你可以输出到页面上看看,我做的是滑动翻页,所以是一段距离.

提问者评价

谢谢!