iOS移动端Owl-Carousel图片的Bootstrap Modal点击异常问题

我用jQuery Owl-Carousel实现了滚动图片画廊，点击轮播里的图片本该弹出Bootstrap Modal，桌面端运行完全正常，但iOS移动端出现了烦人的bug：拖拽图片滚动后，图片有时候死活点不动，得反复点击好几次才能触发弹窗，交互表现特别不稳定。

你可以通过Chrome DevTools切换到iPhone设备工具栏，用下面的代码复现这个问题：

HTML代码 #

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.3/assets/owl.theme.default.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.3/assets/owl.carousel.css" rel="stylesheet"/>

<div class="loop owl-carousel owl-theme">
  <div class="item">
    <div class="CarouselImage" data-toggle="modal" data-target="#GModal1">
      <img src="https://placehold.it/400x400">
    </div>
  </div>
  <div class="item">
    <div class="CarouselImage" data-toggle="modal" data-target="#GModal2">
      <img src="https://placehold.it/400x400">
    </div>
  </div>
  <div class="item">
    <div class="CarouselImage" data-toggle="modal" data-target="#GModal3">
      <img src="https://placehold.it/400x400">
    </div>
  </div>
  <div class="item">
    <div class="CarouselImage" data-toggle="modal" data-target="#GModal4">
      <img src="https://placehold.it/400x400" >
    </div>
  </div>
  <div class="item">
    <div class="CarouselImage" data-toggle="modal" data-target="#GModal5">
      <img src="https://placehold.it/400x400" >
    </div>
  </div>
  <div class="item">
    <div class="CarouselImage" data-toggle="modal" data-target="#GModal6">
      <img src="https://placehold.it/400x400">
    </div>
  </div>
  <div class="item">
    <div class="CarouselImage" data-toggle="modal" data-target="#GModal7">
      <img src="https://placehold.it/400x400">
    </div>
  </div>
  <div class="item">
    <div class="CarouselImage" data-toggle="modal" data-target="#GModal8">
      <img src="https://placehold.it/400x400">
    </div>
  </div>
  <div class="item">
    <div class="CarouselImage" data-toggle="modal" data-target="#GModal9">
      <img src="https://placehold.it/400x400" >
    </div>
  </div>
</div>

<div class="modal fade" id="GModal1">
  <div class="modal-dialog modal-lg">
    <div class="GalleryModalHolder">
      <img class="GalleryModalImg" src="https://placehold.it/800x800" />
    </div>
  </div>
</div>
<div class="modal fade" id="GModal2">
  <div class="modal-dialog modal-lg">
    <div class="GalleryModalHolder">
      <img class="GalleryModalImg" src="https://placehold.it/800x800" />
    </div>
  </div>
</div>
<div class="modal fade" id="GModal3">
  <div class="modal-dialog modal-lg">
    <div class="GalleryModalHolder">
      <img class="GalleryModalImg" src="https://placehold.it/800x800" />
    </div>
  </div>
</div>
<div class="modal fade" id="GModal4">
  <div class="modal-dialog modal-lg">
    <div class="GalleryModalHolder">
      <img class="GalleryModalImg" src="https://placehold.it/800x800" />
    </div>
  </div>
</div>
<div class="modal fade" id="GModal5">
  <div class="modal-dialog modal-lg">
    <div class="GalleryModalHolder">
      <img class="GalleryModalImg" src="https://placehold.it/800x800" />
    </div>
  </div>
</div>
<div class="modal fade" id="GModal6">
  <div class="modal-dialog modal-lg">
    <div class="GalleryModalHolder">
      <img class="GalleryModalImg" src="https://placehold.it/800x800" />
    </div>
  </div>
</div>
<div class="modal fade" id="GModal7">
  <div class="modal-dialog modal-lg">
    <div class="GalleryModalHolder">
      <img class="GalleryModalImg" src="https://placehold.it/800x800" />
    </div>
  </div>
</div>
<div class="modal fade" id="GModal8">
  <div class="modal-dialog modal-lg">
    <div class="GalleryModalHolder">
      <img class="GalleryModalImg" src="https://placehold.it/800x800" />
    </div>
  </div>
</div>
<div class="modal fade" id="GModal9">
  <div class="modal-dialog modal-lg">
    <div class="GalleryModalHolder">
      <img class="GalleryModalImg" src="https://placehold.it/800x800" />
    </div>
  </div>
</div>

JavaScript代码 #

$('.loop').owlCarousel({
  center: true,
  nav:true,
  items:2,
  loop:true,
  margin:10,
  responsive:{
    600:{
      items:4
    }
  }
});

修复方案（亲测有效） #

这个问题本质是iOS的触摸事件和Owl Carousel的拖拽事件、Bootstrap的点击事件之间的冲突——iOS上拖拽结束后，触摸事件的默认行为可能阻止了点击事件的正常触发。下面几个方案可以逐步尝试：

方案1：手动绑定点击事件替代Bootstrap的data-toggle #

Bootstrap的data-toggle自动绑定的事件在iOS拖拽后容易失效，手动绑定可以绕过这个问题：

$('.loop').owlCarousel({
  center: true,
  nav:true,
  items:2,
  loop:true,
  margin:10,
  responsive:{
    600:{
      items:4
    }
  }
}).on('click', '.CarouselImage', function(e) {
  // 阻止事件冒泡，避免和Owl的拖拽事件冲突
  e.stopPropagation();
  // 获取目标Modal的ID，手动触发显示
  const targetModal = $(this).data('target');
  $(targetModal).modal('show');
});

方案2：调整Owl Carousel的触摸阈值 #

Owl默认的触摸起始阈值（touchStartThreshold）是4，也就是说滑动距离超过4px才会被识别为拖拽。把这个值调小，让轻微的点击不会被误判为拖拽：

$('.loop').owlCarousel({
  center: true,
  nav:true,
  items:2,
  loop:true,
  margin:10,
  // 降低触摸起始阈值，默认4，设为2更敏感
  touchStartThreshold: 2,
  mouseDrag: true, // 保持桌面端拖拽体验
  responsive:{
    600:{
      items:4
    }
  }
});

方案3：添加CSS触摸优化 #

给图片容器添加触摸相关的CSS，消除iOS的默认行为干扰：

.CarouselImage {
  cursor: pointer;
  /* 消除iOS点击时的高亮背景 */
  -webkit-tap-highlight-color: transparent;
  /* 禁用触摸延迟，需要配合viewport设置 */
  touch-action: manipulation;
}

同时确保你的HTML头部有正确的viewport配置：

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

方案4：区分拖拽和点击事件 #

如果上面的方法都不行，可以通过监听Owl的拖拽事件，明确区分“拖拽”和“点击”行为，避免两者冲突：

let isDragging = false;

$('.loop').owlCarousel({
  center: true,
  nav:true,
  items:2,
  loop:true,
  margin:10,
  responsive:{
    600:{
      items:4
    }
  }
})
// 开始拖拽时标记状态
.on('drag.owl.carousel', function() {
  isDragging = true;
})
// 拖拽结束后重置状态
.on('dragged.owl.carousel', function() {
  isDragging = false;
})
// 点击时判断是否是拖拽后的误触
.on('click', '.CarouselImage', function(e) {
  if (isDragging) {
    e.preventDefault();
    return;
  }
  const targetModal = $(this).data('target');
  $(targetModal).modal('show');
});

这个方法的逻辑是：当用户正在拖拽时，阻止点击事件；拖拽完全结束后，再允许点击触发Modal，从根源上避免了拖拽和点击的冲突。

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