移动事件的替代方案有哪些可以用于movementX和movementY？

Question

我知道如何在鼠标移动到画布区域时追踪鼠标移动。

var canvas = document.getElementById("canvas");
var info = document.getElementById("info");

function getMovements(e) {
  info.innerHTML =  "x change: " + String(e.movementX) + " , y change: " + String(e.movementY);
}

canvas.addEventListener("mousemove", getMovements);

canvas {
  background-color:bisque;
}

<canvas id ="canvas" width=300, height=300></canvas>
<div id=info></div>

但是当e.movementX和e.movementY无法使用时，如何在canvas.addEventListener("touchmove", getMovements);事件中实现相同的功能呢？

- WhoAmI

Answer 1

没有这些属性，因为触摸事件可以有多个触点。不过，在调用您的getMovements函数之前，您可以自己将这些属性添加到触摸事件中。

var previousTouch;
canvas.addEventListener("touchmove", (e) => {
    const touch = e.touches[0];

    if (previousTouch) {
        // be aware that these only store the movement of the first touch in the touches array
        e.movementX = touch.pageX - previousTouch.pageX;
        e.movementY = touch.pageY - previousTouch.pageY;

        getMovements(e);
    };

    previousTouch = touch;
});

如果您想要的话，可以在touchend事件中将previousTouch设置为null，以防止新的触摸在其第一次移动时使用旧的previousTouch。

canvas.addEventListener("touchend", (e) => {
    previousTouch = null;
});

- swift-lynx

---

当我尝试你的代码时，它会在previousTouch = touch行上开始调试。这个代码在你的机器上工作了吗？我只是用你的监听器替换了之前的监听器，是否做错了什么？ - WhoAmI

let 可以被重新赋值...这是因为 let 在当前作用域定义变量，而 var 则提升到全局作用域。 - chad_

因为touch未定义，所以在previousTouch = touch;处出现错误。请接受我的编辑，你的代码将会正常工作。我会将其标记为答案！ - WhoAmI

没关系！我有时候会通过阅读答案下面的评论来解决问题，所以我想为下一个人避免一些困惑。 :) - chad_

var 只在声明它的 函数 范围内生效，不具备全局作用域。let 则是 块级别 作用域。 - ankr