使用触控板或触摸屏滑动时touchend事件触发延迟，请问有什么解决方法？

问题原因 #

touchend 延迟是移动端浏览器的默认机制导致的：浏览器会在触摸结束后预留判定时间，检测是否为双击缩放、页面滑动导航等系统级手势，只有判定不是系统手势后才会触发 touchend，鼠标模拟触控时不会触发这套判定逻辑因此无延迟。

可行解决方案 #

• 首先添加视口meta标签禁用双击缩放，从根源消除300ms基础判定延迟：
  把下面的标签加入页面 <head> 区域：
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
• 针对滑块元素的触摸事件监听器关闭被动模式，按需阻止默认行为：
  绑定 touchstart/touchmove 事件时，明确设置 passive: false，在滑块触发滑动的 touchmove 回调中调用 e.preventDefault()，阻断浏览器的滑动手势判定：

  slider.addEventListener('touchmove', (e) => {
    // 你的滑块滑动逻辑
    e.preventDefault()
  }, { passive: false })
  

• 替换为Pointer Events统一处理输入，规避触摸事件的默认判定逻辑：
  放弃单独监听触摸事件，改用 pointerdown、pointermove、pointerup 事件统一处理鼠标、触摸输入，触发时机无额外延迟，同时配合 setPointerCapture 保证滑动过程中事件不会脱离滑块元素：

  slider.addEventListener('pointerdown', (e) => {
    slider.setPointerCapture(e.pointerId)
    // 滑动开始逻辑
  })
  slider.addEventListener('pointermove', (e) => {
    // 滑块位置更新逻辑
  })
  slider.addEventListener('pointerup', (e) => {
    slider.releasePointerCapture(e.pointerId)
    // 滑动结束逻辑
  })
  

• 如果是横向滑块，可单独禁用页面水平滑动导航手势，避免和滑块滑动冲突：
  在Chrome中可以通过CSS单独禁用对应方向的导航手势：

  body {
    overscroll-behavior-x: none;
  }
  

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