Блог

Я работаю над обнаружением функции горизонтального перетаскивания, которая обнаруживала бы изменения в движении в направлении 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;
}
  

Это работает для настольных компьютеров, но не работает для мобильных устройств.
Кто-нибудь, пожалуйста, может подсказать мне, что можно сделать для достижения этого?

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 .