有没有办法修复 javascript "touch" 事件在 IOS 设备上触发两次？ （包括视频示例）

Question

我正在制作一个网页，该网页使用轮播在较小的屏幕尺寸上显示内容。我编写了一些 javascript 来在移动设备上创建“滑动”功能，它在 android 设备上完美运行。但是，在某些 iPhone（运行 较新版本的 IOS 上）事件似乎被触发了两次。

我已经研究了好几天了，虽然我见过一些类似的场景，但 none 是完全一样的。通常，我发现的类似场景有两个事件被绑定，这就是触发函数两次的原因。例如，$button.bind("touchstart click");

但是，不是我的问题。

我的 问题是 $("#mobileCarousel").on("touchstart") 似乎在使用更新的 IOSs 的 iPhone 上触发了两次.我没有绑定其他事件，只有“touch”

这是一个正在发生的事情的视频示例：https://youtu.be/8XGMKTpUUrI

我已经包含了 js、css 和 html。

我一直为此失眠，所以任何 tips/solutions 如何解决这个问题都将不胜感激。 :D

$("#mobileCarousel").carousel({
  interval: 10000
})

$("#mobileCarousel").on("touchstart", function(event){
        var xClick = event.originalEvent.touches[0].pageX;
    $(this).one("touchmove", function(event){
        var xMove = event.originalEvent.touches[0].pageX;
        if( Math.floor(xClick - xMove) > 3 ){
            $(this).carousel('next');
            console.log("the touch event is firing twice.");
        }
        else if( Math.floor(xClick - xMove) < -3 ){
            $(this).carousel('prev');
            console.log("the touch event is firing twice.");
        }
    });
    $(".carousel").on("touchend", function(){
            $(this).off("touchmove");
    });
});

$(".carousel carousel-item").each(function(){
  var minPerSlide = 3;
  var nextElement = $(this).next();
  if(!nextElement.length){
    nextElement = $(this).siblings(":first");
  }
  nextElement.children(':first-child').clone().appendTo($(this));

  for (var i = 0; i < minPerSlide; i++) {
    nextElement = nextElement.next();
    if(!nextElement.length){
      nextElement = $(this).siblings(":first");

    }
    nextElement.children(":first-child").clone().appendTo($(this));
  }
});

@media only screen and (max-width: 993px) {
  .carousel-inner .carousel-item > div {
    display: none;
  }
  .carousel-inner .carousel-item > div:first-child {
    display: block;

  }
}

<div class="container-fluid carousel-container d-lg-none d-xl-none">
      <div id="mobileCarousel" class="carousel slide w-100" data-ride="carousel">
        <div class="carousel-inner" role="listbox">
          <div class="carousel-item active">

              <div class="card index-card border-success">
                <div class="d-flex justify-content-center">
                  <img src="code icon.png" alt="">
                </div>
                <div class="d-flex justify-content-center">
                  <p class="pTagsForCardTitles">&ltHTML&gt and CSS3</p>
                </div>
                <div class="d-flex justify-content-center">
                  <p class="pTagsForCards d-flex justify-content-center">We design and program your website from scratch and to
                    your liking. No restrictive templates! Have the website you have always dreamt of for your business.</p>
                </div>
              </div>

          </div>
          <div class="carousel-item">

              <div class="card index-card border-success">
                <div class="d-flex justify-content-center">
                  <img src="shield icon.png" alt="">
                </div>
                <div class="d-flex justify-content-center">
                  <p class="pTagsForCardTitles">Online Security</p>
                </div>
                <p class="pTagsForCards d-flex justify-content-center">Tropiweb supplies SSL security certificates to every
                page it produces. Keep your transactions and clients' sensitive informations out of the wrong hands.</p>
              </div>

          </div>
          <div class="carousel-item">

              <div class="card index-card border-success">
                <div class="d-flex justify-content-center">
                  <img src="search icon.png" alt="">
                </div>
                <div class="d-flex justify-content-center">
                  <p class="pTagsForCardTitles">Search Engine Optimization</p>
                </div>
                <p class="pTagsForCards d-flex justify-content-center">We optimize your web-page's &ltmeta&gt, &ltalt&gt, and
                  &lttitle&gt tags in order to maximize the probability of potential clients finding you through any search engine</p>
              </div>

          </div>
          <div class="carousel-item">

              <div class="card index-card border-success">
                <div class="d-flex justify-content-center">
                  <img src="responsive icon.png" alt="">
                </div>
                <div class="d-flex justify-content-center">
                  <p class="pTagsForCardTitles">Sleek and Responsive</p>
                </div>
                <p class="pTagsForCards d-flex justify-content-center">Your website is designed with cross-platform compatability as a priority.
                  No matter the web-browser or device (tablet, laptop, or phone) your page will always function properly.</p>
              </div>

          </div>
          <div class="carousel-item">

              <div class="card index-card border-success">
                <div class="d-flex justify-content-center">
                  <img src="money icon.png" alt="">
                </div>
                <div class="d-flex justify-content-center">
                  <p class="pTagsForCardTitles">E-Commerce Solutions</p>
                </div>
                <p class="pTagsForCards d-flex justify-content-center">Run your online shop right from your very own website. Validate transactions,
                  keep stock of your merchandise, charge applicable sales taxes, and ship your product with no hassle.</p>
              </div>

          </div>
        </div>
        <a class="carousel-control-prev" href="#mobileCarousel" role="button" data-slide="prev">
            <span>
              <img class="carousel-arrow-right" src="flecha-de.png" alt="">
            </span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#mobileCarousel" role="button" data-slide="next">
            <span>
              <img class="carousel-arrow-left" src="flecha-iz.png" alt="">
            </span>
            <span class="sr-only">Next</span>
          </a>
      </div>
  </div>

Answer 1

所以，经过无数个不眠之夜和调试，我解决了这个问题。显然问题是我使用的是 jQuery 的旧弃用版本。一旦我开始使用最新版本的 jQuery，问题就消失了。