如何使用普通 javascript 让 addEventListener 点击事件在 IOS 上工作

Question

所以我今天遇到了一些奇怪的事情（至少对我来说）。 我正在尝试做一个基本的点击事件，将 class 添加和删除到带有一些 css 动画的 div 中。 这是我正在构建的图像 slider。 它在桌面上的 Safari、Chrome 等上运行良好。 但在 Iphone 上，它似乎只在第一次点击或触摸时才有效。 看起来它没有删除 class 所以它可以再次添加..

我确实尝试添加它来检查用户代理并添加 touchstart 但没有运气：

var ua = navigator.userAgent,
event = ua.match(/iPad/i) || ua.match(/iPhone/) ? "touchstart" : "click";

我还向 css 添加了所有我能找到的前缀，但由于它是第一次工作，所以它可能不是问题。

希望有人知道发生了什么。

const clientBtn = document.querySelectorAll(".client-btn");
let clientSliderContainer = document.querySelectorAll(
  ".field-clientslider-container__wrapper"
);
clientSliderContainer[0].style.display = "grid";
let clientNumber = 0;
clientBtn.forEach(function (button) {
  button.addEventListener('click', function () {
    clientSliderContainer[clientNumber].style.display = "none";
    clientSliderContainer[clientNumber].classList.remove("fadein");
    if (button.classList.contains("client-slider-prev-btn")) {
      clientNumber--;
      if (clientNumber < 0) {
        clientNumber = clientSliderContainer.length - 1;
      }
      clientSliderContainer[clientNumber].style.display = "grid";
      clientSliderContainer[clientNumber].classList.add("fadein");
    }
    if (button.classList.contains("client-slider-next-btn")) {
      clientNumber++;
      if (clientNumber > clientSliderContainer.length - 1) {
        clientNumber = 0;
      }
      clientSliderContainer[clientNumber].style.display = "grid";
      clientSliderContainer[clientNumber].classList.add("fadein");
    }
  });
});

Answer 1

好的，所以我发现确实是，我的 class 没有被正确移除。 我以为我通过在侦听器回调开始时删除 class 来处理这个问题。 但我只是做了一个修复，我做了一个 setTimeout() 来在几毫秒后删除 class 。 那成功了。

clientBtn.forEach(function (button) {
  button.addEventListener('click', function (event) {
    clientSliderContainer[clientNumber].style.display = "none";
    if (event.currentTarget.classList.contains("client-slider-prev-btn")) {
      clientNumber--;
      if (clientNumber < 0) {
        clientNumber = clientSliderContainer.length - 1;
      }
      clientSliderContainer[clientNumber].style.display = "grid";
      clientSliderContainer[clientNumber].classList.add("fadein");
      setTimeout(function() {
        clientSliderContainer[clientNumber].classList.remove("fadein");
      }, 1000);
    }
    if (event.currentTarget.classList.contains("client-slider-next-btn")) {
      clientNumber++;
      if (clientNumber > clientSliderContainer.length - 1) {
        clientNumber = 0;
      }
      clientSliderContainer[clientNumber].style.display = "grid";
      clientSliderContainer[clientNumber].classList.add("fadein");
      setTimeout(function() {
        clientSliderContainer[clientNumber].classList.remove("fadein");
      }, 1000);
    } 
  });
});