如何在 JavaScript 中将“keydown” eventHandler 与“IntersectionObserver”一起使用？

编程问答 2022-04-24

问题描述

我正在用 JavaScript 配置一个滑块。为此，我编写了以下代码。 slides 是所有 4 张照片的 NodeList。 sliderBtnLeft 是左箭头 sliderBtnRight 是一个向右箭头

有一个 goToSlide(slide) 函数用于通过调整 transformX 来显示特定幻灯片。

有 2 个函数 nextSlideFn() 和 prevSlideFn() 在按下相应按钮时调用。

当我使用按钮时，代码运行良好。当我使用 'keydown' eventListener 时，代码也可以正常工作。

当我尝试将 'keydown' eventListener. 与相交观察者一起使用时出现问题。

第一次出现在视口中时它可以正常工作。稍后，如果我向上滚动并再次向下滚动，则按下箭头键后的函数会被调用 3 次。

例如。如果我在上下滚动后按 ArrowRight，nextSlideFn() 会被调用 3 次。每次我上下滚动时，它被调用的次数增加 2。

一次上下滚动：nextSlideFn() 被调用 3 次 上下滚动两次：nextSlideFn() 被调用 5 次 三次上下滚动：nextSlideFn() 被调用 7 次 等等……

ArrowLeft 也一样。 （我通过将其记录到控制台来检查它）

观察者函数sliderFunction()和document.addEventListener('keydown',...)一起使用时存在一些问题。
可能是什么原因

//代码片段


    const slides = document.querySelectorAll('.slide');
    const slider = document.querySelector('.slider');
    const sliderBtnLeft = document.querySelector('.slider__btn--left');
    const sliderBtnRight = document.querySelector('.slider__btn--right');
    
    let currentSlide = 0;
          
    
    const goToSlide = function(slide){
      slides.forEach((s,index) => {
        s.style.transform = `translateX(${100 * (index - slide)}%)`;
      });
    }
    
    goToSlide(0);
    
    const nextSlideFn = function(){
      (currentSlide === slides.length - 1) ? currentSlide = 0 : currentSlide++;
      console.log('Right pressed');
      goToSlide(currentSlide);
    };
    
    const prevSlideFn = function(){
      (currentSlide === 0) ? currentSlide = slides.length - 1 : currentSlide --;
      console.log('Left pressed');
      goToSlide(currentSlide);
    };
    
    sliderBtnRight.addEventListener('click',nextSlideFn);
    sliderBtnLeft.addEventListener('click',prevSlideFn);
    
    const slideObject = {
      root: null,threshold: 0,}
    
    const sliderFunction = function(entries,observer){
      const entry = entries[0];
      console.log(entry.target);
      
      document.addEventListener('keydown',function(e){
    
        if(e.key === 'ArrowRight'){
          nextSlideFn();
        }
        if(e.key === 'ArrowLeft'){
           prevSlideFn();
        }
       }); 
   
    };
    
    const slideObserver = new IntersectionObserver(sliderFunction,slideObject);

    slideObserver.observe(slider);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

intersection-observerjavascriptkeydownkeydownsliderslider