pageX 值未在 touchmove 函数中更新

Question

我正在尝试使用触摸事件的 pageX 值移动页面上的元素。我在下面的代码中放置了两个 console.log 语句来跟踪 pageX 值——第一个在 touchstart 函数中输出 pageX 值，第二个连续跟踪 [=当我的手指在屏幕上移动时，touchmove 函数中的 12=] 值。

我期待 touchmove 函数的 pageX 值随着我移动手指而不断变化，但它只是不断输出与 touchstart 相同的东西函数输出。例如，如果 touchstart console.log 的输出是 pageX 的 256.55 值，那么 touchmove console.log 将连续输出一个值 256.55 的流，这是我希望该值发生变化的地方。

我试过删除 event.preventDefault(); 语句，这只是对阻止 pageX 更新的某种猜测？但这并没有改变任何事情。

pageX 值是否是跟踪连续 x 位置的正确值？

// event listener on an image that gets touched
lightboxImages[i].addEventListener('touchstart', touchMove);

  function touchMove(event) {

    console.log(touch.pageX);

    event.preventDefault();
    var touchedImage = event.target;
    var touch = event.touches[0];
    var moveOffsetX = touchedImage.offsetLeft - touch.pageX;

    touchedImage.addEventListener('touchmove', function() {

      console.log(touch.pageX);

      var positionX = touch.pageX + moveOffsetX;
      touchedImage.style.left = positionX + 'px';
    }, false);
  }

大部分代码取自：https://www.youtube.com/watch?v=_3b1rvuFCJY

编辑：我将代码重构为两个独立的函数，如下所示：

// event listeners on an image that gets touched
lightboxImages[i].addEventListener('touchstart', touchStart);
lightboxImages[i].addEventListener('touchmove', touchMove);

function touchStart(event) {

    event.preventDefault();
    touchedImage = event.target;
    touch = event.touches[0];
    moveOffsetX = touchedImage.offsetLeft - touch.pageX;

    console.log(touch.pageX);

  }

  function touchMove(event) {

    console.log(touch.pageX);

    var positionX = touch.pageX + moveOffsetX;
    //touchedImage.style.left = positionX + 'px';
    touchedImage.style.left = touch.pageX + 'px';

  }

..但仍然遇到同样的问题。

Answer 1

我发现将 touchstart 的 pageX 值分配给变量不会在 touchmove 内发生更改，所以我不得不只分配 touchmove 的值event.touches[0] 到它自己的变量，像这样：

function touchStart(event) {

    event.preventDefault();
    touchedImage = event.target;
    touch = event.touches[0];
    moveOffsetX = touchedImage.offsetLeft - touch.pageX;

  }

  function touchMove(event) {

    // rather than trying to access variable touch from the touchstart function, I had to get event.touches[0] from touchmove's event
    var movedTouch = event.touches[0];

    var positionX = movedTouch.pageX + moveOffsetX;
    touchedImage.style.left = positionX + 'px';

  }

pageX 值未在 touchmove 函数中更新

pageX value not updating in touchmove function

javascript

touchstart

touchmove