首页 > 代码库 > JQuery 获取touchstart,touchmove,touchend 坐标

JQuery 获取touchstart,touchmove,touchend 坐标

JQuery写法:

 

$(‘#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;}

 

 

原生写法:

 

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]

 

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

 

 

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

 

 

顺带贴出常用的一句

e.preventDefault();

 

JQuery 获取touchstart,touchmove,touchend 坐标