JQuery 获取touchstart,touchmove,touchend 坐标

作者: 来源: 时间: 2018-01-03 21:16 阅读: 次
  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();

赞助推荐