jquery - 单击无控件时，bootstrap 轮播在 ios 上滑动

Question

我在使用 Bootstrap 轮播时遇到了无法理解的问题。 在移动设备上，我想通过滑动(而不是单击)进行滑动，然后单击时会出现一个 pinterest 按钮。 我已经停用了移动设备上的轮播控制按钮(请参阅下面的 css 代码)，并对 pinterest 按钮设置了 jquery 规则， 它在安卓上完美运行。但在ios上，点击时，轮播是滑动的。

有什么想法吗？

我的代码

$('.carousel-item img').click(function() {
  $('.social-sharing').toggleClass('visible');
});
$("#carouselwork").on('slide.bs.carousel', function() {
  $('.social-sharing').removeClass('visible');
});

@media (max-width: 768px) {
  .social-sharing.visible {
    display: block;
  }
  .carousel-control {
    display: none;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div id="carouselwork" class="carousel slide work-single" data-ride="carousel" data-interval="false">
  <div class="carousel-inner">
    <div class="carousel-item  active">
      <img src="..." alt="..." />
      <div class="social-sharing ss-social-sharing">
        <a onclick="return ss_plugin_loadpopup_js(this);" rel="external nofollow" class="ss-button-pinterest" href="..." target="_blank"></a>
      </div>
      <div class="img-work-caract">
        <p>the title</p>
        <div class="counter">1/<span class="total">2</span></div>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." alt="..." />
      <div class="social-sharing ss-social-sharing">
        <a onclick="return ss_plugin_loadpopup_js(this);" rel="external nofollow" class="ss-button-pinterest" href="..." target="_blank"></a>
      </div>
      <div class="img-work-caract">
        <p>the title</p>
        <div class="counter">2/<span class="total">2</span></div>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev carousel-control" href="#carouselwork" role="button" data-slide="prev"></a>
  <a class="carousel-control-next carousel-control" href="#carouselwork" role="button" data-slide="next"></a>
</div>

谢谢!

Answer 1

这似乎是轮播 Bootstrap 中的一个错误。 修复已部署在 github 分支 v4-jo-fix-carousel-click-slide 上