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();