如何解决如何在 JavaScript 中将“keydown” eventHandler 与“IntersectionObserver”一起使用?
我正在用 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 举报,一经查实,本站将立刻删除。