Javascript点击事件每次点击都会加倍

Question

对于我遇到的这个 javascript 问题的一些建议，我真的很感激，每次我的 slider 关闭然后重新打开时，点击事件似乎都会加倍。

当您第一次打开 slider 并单击幻灯片时，您可以在控制台中看到每次单击“btn--next”时单击次数递增 1，这当然是正确的。然后，当我关闭 slider 并在单击“btn--next”时再次重新打开它时，控制台中的点击次数现在每次点击都会增加 2 次。再次关闭 slider 并重新打开，然后每次重新加载 slider 时控制台中的“btn--next”点击次数增加 3，依此类推。 https://jsfiddle.net/95afhtx8/2/

 var loadSlider = document.querySelector('.load__slider');


loadSlider.addEventListener('click', function() {

  var slider = document.querySelector('.animal__slider');
  var sliderSlide = document.querySelectorAll('.animal__slider__slide');
  var nextSlide = document.querySelector('.btn--next');
  var previousSlide = document.querySelector('.btn--previous');
  var closeSlider = document.querySelector('.animal__slider__close');
  var currentSlide = 0;

  slider.classList.add('active');
  setTimeout(function() {
    slider.classList.add('active--show');
    startSlide();
  }, 100);

  //Reset Slider
  function resetSlides() {
    for (var s = 0; s < sliderSlide.length; s++) {
      sliderSlide[s].classList.remove('active--show');
      sliderSlide[s].classList.remove('active');
    }
  }

  //Start Slider
  function startSlide() {
    resetSlides();
    sliderSlide[0].classList.add('active');
    setTimeout(function() {
      sliderSlide[0].classList.add('active--show');
    }, 100);
  }

  //Previous slide
  function slidePrevious() {
    resetSlides();
    sliderSlide[currentSlide - 1].classList.add('active');
    setTimeout(function() {
      sliderSlide[currentSlide].classList.add('active--show');
    }, 100);
    currentSlide--;
  }

  previousSlide.addEventListener('click', function() {
    if (currentSlide === 0) {
      currentSlide = sliderSlide.length;
    }
    console.log('click');
    slidePrevious();
  });

  //Next slide
  function slideNext() {
    resetSlides();
    sliderSlide[currentSlide + 1].classList.add('active');
    setTimeout(function() {
      sliderSlide[currentSlide].classList.add('active--show');
    }, 100);
    currentSlide++;
  }

  nextSlide.addEventListener('click', function() {
    if (currentSlide === sliderSlide.length - 1) {
      currentSlide = -1;
    }
    console.log('click');
    slideNext();
  });

  closeSlider.addEventListener('click', function() {
    slider.classList.remove('active--show');
    slider.classList.remove('active');
    resetSlides();
  });
});

Answer 1

这是因为每次您点击 slider 切换时:

loadSlider[s].addEventListener('click', function () { 

您正在重新运行这样的代码，这将向元素添加另一个点击处理程序:

 nextSlide.addEventListener('click', function() {

您可以向 DOM 中的任何对象添加多个事件监听器。因此，您只需在每次打开 slider 时继续添加更多内容即可。

这里有三个常规选项。

选项 1:只设置一次点击处理程序

不要在您的 loadSlider[s].addEventListener('click', function () { 函数内重新添加事件处理程序。在外部进行，这样您就不会重新添加处理程序。

选项 2:删除关闭时的点击处理程序

您可以在关闭时删除事件监听器。为此，您应该存储对您创建的函数的引用，以便稍后可以显式删除它。您应该为您添加的任何处理程序执行此操作。

const nextClick = function () {
    ...
};
nextSlide.addEventListener('click', nextClick);

function resetSlides() {
    nextSlide.removeEventListener('click', nextClick);
    ...
}

这样，当 slider 隐藏时，点击功能将被关闭，重新打开它会添加新的点击处理程序，而旧的不会触发，因为您删除了它们。

选项 3:重新创建元素

如果您从 DOM 中删除一个元素并创建一个全新的元素，则新元素上不会有陈旧的点击处理程序。这意味着您需要使用 Javascript(使用 document.createElement)动态构建标记，而不是将其存储在 HTML 页面主体中。