检测移动设备上的触摸移动事件

Question

我正在检测水平拖动功能，该功能将检测 X 方向的移动变化。以下是代码：

const myObject = document.getElementById("scroll-window");
play3D()
var a = 0
var b = 0
myObject.onpointerdown = (e) => {

    a = e.clientX;
    myObject.onpointermove = (e) => {

        b = e.clientX;
        var motionx = e.movementX
        if (e.movementX >=10){
            motionx = 10
        }
        moveX = b-a;
        if (moveX>5){
            console.log(moveX)
            setImage(+1);
            a = b;
        } else if (moveX<5){
             setImage(-1);
        }
        a = b;
    }
}
myObject.onpointerup = (e) => {
    moveX = 0;
    myObject.onpointermove = null;
}

这适用于桌面设备，但不适用于移动设备。 谁能建议我可以做些什么来实现这一目标？

Answer 1

pointer[...] 事件不适用于触摸。对于触摸，您需要touch[...] 事件。

myObject.addEventListener("touchstart", (e) => {
  ...
});
// touchstart, touchmove, touchend, touchcancel

代码的其他部分几乎相同。

在此处阅读更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Events

---

作为旁注，pointer[...] 事件已被 mouse[...] 事件取代。您可能希望切换到这些。

在此处阅读更多信息：https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

---

根据 OP 的要求，如果您希望在两个事件上发生相同的操作，只需显式声明事件处理函数，并将其传递给 addEventListener() 两次。像这样的：

function hdlr1(ev) {
  // Handle event here
}
myObject.addEventListener("touchstart", hdlr1);
myObject.addEventListener("mousedown", hdlr1);
...

不过我个人不推荐在这种情况下使用，因为你可能希望以后给鼠标和触摸稍微不同的行为。此外，您应该注意只使用mouse[...] 和touch[...] 事件共有的属性和函数。我不会在这个答案中解释多态性，但基本上你应该将此处理程序中的事件视为UIEvent，因为UIEvent 是MouseEvent 和TouchEvent 的最后一个共同祖先。