JQuery 获取touchstart,touchmove,touchend 坐标

JQuery写法:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$( '#id' ).on( 'touchstart' , function (e) {
     var  _touch = e.originalEvent.targetTouches[0];
     var  _x= _touch.pageX;
});
 
$( '#id' ).on( 'touchmove' , function (e) {
     var  _touch = e.originalEvent.targetTouches[0];
     var  _x= _touch.pageX;
});
 
$( '#id' ).on( 'touchend' , function (e) {
     var  _touch = e.originalEvent.changedTouches[0];
     var  _x= _touch.pageX;
}

 

 

原生写法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
document.getElementById( "id" ).addEventListener( "touchstart" , function (e)
{
     var  _x=e.touches[0].pageX;
     var  _y=e.touches[0].pageY;
     console.log( "start" ,_x)
})
document.getElementById( "id" ).addEventListener( "touchmove" , function (e)
{
     var  _x=e.touches[0].pageX;
     var  _y=e.touches[0].pageY;
     console.log( "move" ,_x)
})
document.getElementById( "id" ).addEventListener( "touchend" , function (e)
{
     var  _x=e.changedTouches[0].pageX;
     var  _y=e.changedTouches[0].pageY;
     console.log( "end" ,_x)
})

  

 以上两种办法中 touchend 需要使用changedTouches[0]

 

一般我们取第一个手指的坐标,如果有其他要求可能 需要判断手指数量

1
2
3
4
if  (e.targetTouches.length == 1)
{
   //...
}

 

顺带贴出常用的一句

1
e.preventDefault();

你可能感兴趣的:(JQuery 获取touchstart,touchmove,touchend 坐标)