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和{{的最后一个共同祖先1}}。

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

1 个答案: