触摸事件的 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);事件做同样的事情呢？

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;
});