Safari下设置data-bs-touch=false仍无法禁用Bootstrap carousel触摸滑动

问题原因 #

Bootstrap 5的data-bs-touch="false"属性在iOS Safari浏览器上存在兼容问题，iOS的触摸事件默认采用passive模式优化性能，Bootstrap内置的属性解析逻辑没有针对该场景做特殊处理，导致禁用触摸滑动的配置不生效。

解决方法 #

按优先级依次尝试以下方案即可：

• 方案1：用JS主动初始化轮播，显式传入touch禁用配置
  不要完全依赖HTML的data属性配置，页面加载完成后手动初始化轮播组件：

  const carouselDom = document.getElementById('infinityWarContentWrapper')
  new bootstrap.Carousel(carouselDom, {
    touch: false,
    interval: false
  })
  

• 方案2：手动拦截轮播区域的触摸事件
  如果方案1还是不生效，直接阻止轮播区域的触摸滑动默认行为，注意要显式设置passive: false适配iOS的事件机制：

  const carouselWrapper = document.getElementById('infinityWarContentWrapper')
  carouselWrapper.addEventListener('touchstart', e => e.preventDefault(), { passive: false })
  carouselWrapper.addEventListener('touchmove', e => e.preventDefault(), { passive: false })
  

• 方案3：增加CSS样式禁用触摸行为
  配合CSS的touch-action属性彻底禁用区域触摸操作：

  #infinityWarContentWrapper {
    touch-action: none;
    -ms-touch-action: none;
  }
  

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