Question

每次图像点击时，我都会使用灯箱式模式创建一个简单的图库。（我称之为灯箱，但它不是Lightbox库。）它起作用，我开始用它创作，决定在模态打开时按箭头键使图像可导航。

这几乎有效。图像通常按顺序返回。但是，有时它会在错误的图像转到正确的图像之前闪烁。我通过在保存图像的数组的索引上使用console.log来捕获它。我在控制台中看到的是连续数字之间的一堆奇怪数字。它会从正确的图像转到正确的图像，但偶尔也会闪烁。它似乎经常报告那些奇怪的数字，无论它是否闪烁。它并不总是这样做，所以我不完全确定原因是什么，但我怀疑它正在阅读＆＃34; key_up＆＃34;太多次了。

以下是代码：

//Allow for keyboard navigation, only if the lightbox is open.
document.addEventListener("keyup", (event)=> {
    if(lightbox) {
        if(event.key === "ArrowRight") {
            index++;
            if(index === images.length) {
                index = 0;
            }
            lb_img.firstElementChild.src = images[index].src;
            console.log(index);
        }

        if(event.key === "ArrowLeft") {
            index--;
            if(index === -1) {
                index = images.length - 1;
            }
            lb_img.firstElementChild.src = images[index].src;
            console.log(index);
        }
    }
});

如果你想要完整的代码，我会按照要点：https://gist.github.com/jckuhl/f8a56349d29308eb4af207a09787270a

编辑：使用新代码更新gist。

以下是我的控制台示例：https://i.imgur.com/uWBMS4J.jpg

为什么会这样做？

Answer 1

您附加了eventlistener的次数与点击图像的次数相同，因为您将其附加到click事件的事件处理程序中。这会给你带来麻烦。

通过在for循环外部和单击处理程序外部初始化它，确保只附加一次。

阻止关键事件过度激发

1 个答案: