触摸事件的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>

但是，当&不起作用时，我该如何对canvas.addEventListener("touchmove", getMovements);事件做同样的事情呢？e.movementXe.movementY

Answer 1

没有这样的属性，因为一个触摸事件可以有多个触摸。但是，您可以在调用函数之前自行将这些属性添加到 touchevent 中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;
});

如果您愿意，可以previousTouch在事件中将 设为 null ，以防止新触摸在第一次移动时touchend使用旧触摸。previousTouch

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