PC端正常的滑块在移动端触摸失效，已添加touch事件仍未解决

核心问题：触摸事件的坐标获取错误 #

鼠标事件里的offsetX是相对于触发元素的偏移量，但触摸事件对象并没有这个属性。你需要从触摸点集合中获取第一个触摸点的位置，再重新计算相对于滑块容器的偏移值。

修改后的JavaScript代码 #

将移动端事件处理部分替换为以下代码：

// MOBILE
sliderContainer.addEventListener('touchstart', (e) => {
    pressed = true;
    // 获取第一个触摸点，计算相对于容器的初始偏移
    const touch = e.touches[0];
    const containerRect = sliderContainer.getBoundingClientRect();
    startX = touch.clientX - containerRect.left - innerSlider.offsetLeft;
});

sliderContainer.addEventListener('touchend', () => {
    pressed = false;
});

sliderContainer.addEventListener('touchmove', (e) => {
    if (!pressed) return;
    e.preventDefault();
    const touch = e.touches[0];
    const containerRect = sliderContainer.getBoundingClientRect();
    // 计算当前触摸点相对于容器的X位置
    x = touch.clientX - containerRect.left;
    innerSlider.style.left = `${x - startX}px`;
});

补充说明 #

• 触摸事件必须通过e.touches[0]获取第一个触摸点，适配单指拖拽的常规场景，避免多触点干扰。
• 使用getBoundingClientRect()获取容器的实时位置，确保坐标计算不受页面滚动影响。
• 移动端无需设置cursor样式（触摸设备看不到鼠标指针），可以直接删掉相关代码。

你的inner-slider设置pointer-events: none是合理的，因为触摸事件绑定在父容器slider-container上，不会影响拖拽逻辑。

内容的提问来源于stack exchange，提问作者gasparb