iPhone设备中Slider首次滑动后停止工作的技术问题

这个问题是iOS Safari特有的触摸事件行为导致的，核心原因有两点：

1. touchmove中无条件调用e.preventDefault()，干扰了iOS浏览器的触摸事件跟踪机制，首次滑动后浏览器无法正确识别后续触摸事件的目标元素。
2. 未处理touchcancel事件，当iOS系统触发该事件时（比如滑动触发页面滚动、弹出系统提示等），触摸状态没有被重置，导致后续滑动逻辑异常。

修复方案 #

首先给Slider元素添加CSS属性，优化iOS触摸行为：

.slider {
  touch-action: pan-x; /* 明确告诉浏览器该元素仅支持水平触摸操作 */
}

然后修改JavaScript代码，调整触摸事件逻辑：

document.addEventListener("DOMContentLoaded", function() {
  const slider = document.querySelector('.slider');
  const prevButton = document.querySelector('.prev-button');
  const nextButton = document.querySelector('.next-button');
  const slides = Array.from(slider.children);
  const slideCount = slides.length;
  let slideIndex = 0;
  let startX = 0;
  let endX = 0;

  prevButton.addEventListener('click', () => {
    slideIndex = (slideIndex - 1 + slideCount) % slideCount;
    slide();
  });

  nextButton.addEventListener('click', () => {
    slideIndex = (slideIndex + 1) % slideCount;
    slide();
  });

  const slide = () => {
    const slideOffset = -slideIndex * slider.clientWidth;
    slider.style.transform = `translateX(${slideOffset}px)`;
  };

  slider.addEventListener('touchstart', touchStart);
  slider.addEventListener('touchmove', touchMove);
  slider.addEventListener('touchend', touchEnd);
  slider.addEventListener('touchcancel', touchCancel);

  function touchStart(e) {
    startX = e.touches[0].clientX;
    endX = startX;
  }

  function touchMove(e) {
    endX = e.touches[0].clientX;
    // 仅当滑动距离超过小阈值时阻止默认行为，避免干扰iOS触摸跟踪
    const swipeDistance = Math.abs(startX - endX);
    if (swipeDistance > 10) {
      e.preventDefault();
    }
  }

  function touchEnd() {
    handleSwipe();
    resetTouchState();
  }

  function touchCancel() {
    resetTouchState();
  }

  function handleSwipe() {
    const swipeThreshold = 50; 
    const swipeDistance = startX - endX;

    if (swipeDistance > swipeThreshold) {
      slideIndex = (slideIndex + 1) % slideCount;
    } else if (swipeDistance < -swipeThreshold) {
      slideIndex = (slideIndex - 1 + slideCount) % slideCount;
    }
    slide();
  }

  function resetTouchState() {
    startX = 0;
    endX = 0;
  }

  window.addEventListener('load', () => {
    slide();
  });
});

修改说明 #

• 新增touch-action: pan-x：让浏览器提前知道元素的触摸交互类型，避免iOS上的触摸事件延迟或跟踪异常。
• 监听touchcancel事件：在触摸被系统中断时重置触摸状态，防止残留状态导致后续滑动失效。
• 调整e.preventDefault()触发时机：仅当用户确实在进行横向滑动时才阻止默认行为，既避免页面滚动干扰，又不破坏iOS的触摸事件机制。
• 拆分逻辑函数：将滑动处理和状态重置拆分，确保状态管理的一致性，也让代码更易维护。

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