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 Mobile 吗？或者我是否使用“触摸”事件侦听器创建一个新函数？

有什么建议吗？

Answer 1

您可以使用指针事件，它扩展了 MouseEvent 接口以包括触摸和手写笔支持（以及其他）。尝试将 mousedown、mouseup、mouseleave 和 mousemove 替换为 pointerdown、pointerup、pointerleave 和 {{1} }.您可以阅读有关指针事件 at MDN 的信息。有关浏览器覆盖范围，请参阅 canIuse。

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

1 个答案: