鼠标拖动功能的替代触摸事件？

Question

我在将触摸事件侦听器添加到此函数时遇到了问题：

$(document).ready(function(){
    const slider = document.querySelector('.home-cates-row');
    let isDown = false;
    let startX;
    let scrollLeft;
    
    slider.addEventListener('mousedown', (e) => {
      isDown = true;
      slider.classList.add('active');
      startX = e.pageX - slider.offsetLeft;
      scrollLeft = slider.scrollLeft;
    });
    slider.addEventListener('mouseleave', () => {
      isDown = false;
      slider.classList.remove('active');
    });
    slider.addEventListener('mouseup', () => {
      isDown = false;
      slider.classList.remove('active');
    });
    slider.addEventListener('mousemove', (e) => {
      if(!isDown) return;
      e.preventDefault();
      const x = e.pageX - slider.offsetLeft;
      const walk = (x - startX) * 1;
      slider.scrollLeft = scrollLeft - walk;
      console.log(walk);
    });
});

这适用于鼠标但不适用于触摸设备。

这种触摸兼容性的最佳做法是什么？我必须使用 JQuery 手机吗？还是我用 'touch' 事件侦听器创建一个新函数？

有什么建议吗？

Answer 1

您可以使用指针事件，它扩展了 MouseEvent 接口以包括触摸和手写笔支持（以及其他）。尝试用 pointerdown、pointerup、pointerleave 和 [=17= 替换 mousedown、mouseup、mouseleave 和 mousemove ].您可以阅读指针事件 at MDN. See canIuse 了解浏览器覆盖率。

鼠标拖动功能的替代触摸事件？

Alternative Touch Events for Mouse drag function?

jquery

jquery-events