每 x 毫秒获取 jquery 触摸位置

Question

有没有办法每 x 毫秒在 touchmove 事件中获取触摸位置，然后执行一个函数，此时 x 坐标和开始时的 x 坐标不同，例如50 像素？

谢谢

Answer 1

试试下面的；

$('document').ready(function() {

  var touch,
    action,
    diffX,
    diffY,
    endX,
    endY,
    startX,
    startY,
    timer,
    timerXseconds = 500, // Change to the Time(milliseconds) to check for touch position 
    xDifferenceX = 50, // Change to difference (px) for x-coordinates from starting point to run your function
    xDifferenceY = 50; // Change to difference (px) for y-coordinates from starting point 

  function getCoord(e, c) {
    return /touch/.test(e.type) ? (e.originalEvent || e).changedTouches[0]['page' + c] : e['page' + c];
  }

  function testTouch(e) {
    if (e.type == 'touchstart') {
      touch = true;
    } else if (touch) {
      touch = false;
      return false;
    }
    return true;
  }

  function onStart(ev) {
    if (testTouch(ev) && !action) {
      action = true;
      startX = getCoord(ev, 'X');
      startY = getCoord(ev, 'Y');
      diffX = 0;
      diffY = 0;
      timer = window.setInterval(checkPosition(ev), timerXseconds); // get coordinaties ever X time
      if (ev.type == 'mousedown') {
        $(document).on('mousemove', onMove).on('mouseup', onEnd);
      }

    }
  }

  function onMove(ev) {
    if (action) {
      checkPosition(ev)
    }
  }

  function checkPosition(ev) {
    endX = getCoord(ev, 'X');
    endY = getCoord(ev, 'Y');
    diffX = endX - startX;
    diffY = endY - startY;
    // Check if coordinates on Move are Different than Starting point by X pixels 
    if (Math.abs(diffX) > xDifferenceX || Math.abs(diffY) > xDifferenceY) {
    //  console.log('Start is :' + startX + ' End is : ' + endX + 'Difference is : ' + diffX);
      $(this).trigger('touchend');

      // here Add your function to run...
    }

  }

  function onEnd(ev) {
    window.clearInterval(timer);
    if (action) {
      action = false;
      if (ev.type == 'mouseup') {
        $(document).off('mousemove', onMove).off('mouseup', onEnd);
      }
    }
  }

  $('#monitor')
    .bind('touchstart mousedown', onStart)
    .bind('touchmove', onMove)
    .bind('touchend touchcancel', onEnd);
});

body {
  margin: 0;
  padding: 0;
}
#monitor {
  height: 500px;
  width: 500px;
  position: relative;
  display: block;
  left: 50px;
  top: 50px;
  background: green;
}
.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-weight: bold;
  bottom: 0;
  background: white;
  width: 50px;
  height: 50px;
  margin: auto;
  font-size: 16px;
  line-height: 23px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='monitor'>
  <div class='box'>start here</div>
</div>

阅读此post 以获得更详细的答案

Answer 2

看看hammer.js，它正是你所需要的。它支持称为 pan 的“touchmove”，在平移时每隔几毫秒调用一次。还有一个threshold 属性，它确定在将其识别为平移之前必须平移的像素长度。

Answer 3

这可以通过几个函数来完成。

• 第一个函数在有触摸事件移动时调用，该事件将触摸的x和y存储在一个单独的变量中。

• 然后我们有一个每 X 毫秒运行一次的函数，该函数从 move 事件中获取 x 和 y，然后分派给您的代码。

• 函数 3、4 和 5 用于处理拖动事件的开始、停止和取消，以及启动/停止第二个函数：

var timerid;
var x;
var y;
var tick = 0;

function handleStart(evt) {
  console.log("handleStart");
  evt.preventDefault();
  timerid = window.setInterval(timer, 50); // Replace 50 here with X
}

function handleEnd(evt) {
  console.log("handleEnd");
  evt.preventDefault();
  window.clearInterval(timerid);
}

function handleCancel(evt) {
  console.log("handleCancel");
  evt.preventDefault();
  window.clearInterval(timerid);
}

function handleMove(evt) {
  console.log("handleMove");
  evt.preventDefault();
  // Select last point:
  var point = evt.changedTouches[evt.changedTouches.length - 1];
  x = point.pageX;
  y = point.pageY;
}

function timer() {
  console.log("timer");
  tick++;
  document.getElementById("output").innerHTML = "tick: " + tick + " x: " + x + " y:" + y;
}


var el = document.getElementById("canvas");
el.addEventListener("touchstart", handleStart, false);
el.addEventListener("touchend", handleEnd, false);
el.addEventListener("touchcancel", handleCancel, false);
el.addEventListener("touchmove", handleMove, false);

<canvas id="canvas" width="300" height="300" style="border:solid black 1px;"></canvas>
<p id=output></p>

只要用户按下屏幕，代码就会将 x 和 y 坐标打印到屏幕上。如果项目需要，您还可以将 x 和 y 的读取集成到现有的游戏循环中，而不是使用单独的函数。