按键事件未在右箭头键上触发

Question

我已经设置了一个 keypress 事件，当用户单击键盘上的右箭头键时应该触发该事件。出于某种原因，它没有开火。使用 Chrome 开发工具确认事件未触发。当用户按右键时，它应该在网页上插入一个图像（并删除另一个图像）。

有很多代码，所以我很抱歉，但我只会输入我认为相关的内容。

这是事件侦听器：

 document.addEventListener("keypress", (event) => {

                if (event.keycode === 39 || event.which === 39) {

                    newPosition = `box-${currentPos + 1}`;

                    naviCtrl.removeCharacter(DOMstrings);

                    naviCtrl.rightBtn(currentPos, chosenCharacter, newPosition);

                }

            });

这是 rightBtn 方法：

 rightBtn: (currentPos, chosenCharacter, newPosition) => {

                if (newPosition.style.border-left === "none" && currentPos.style.border-right === "none") {

                    document.getElementById(newPosition).insertAdjacentHTML("beforeend", '<img class="character-img character-box" src="' + chosenCharacter + '">');

                    console.log(newPosition);

使用此 init 函数加载页面时会设置事件侦听器：

 return {

        init: () => { 

            setupEventListeners() 

        }

    };

可以看到，这个方法在这里被全局调用：

appController.init();

Answer 1

该事件侦听器keypress已被弃用，按原样event.which。keydown在这种情况下，您应该（可能）使用 use以及右箭头 ( ArrowRight)的正确键码，如下所示：document.addEventListener("keydown", (event) => {&nbsp; if (event.keycode === "ArrowRight" || event.which === 39) {&nbsp; &nbsp; newPosition = `box-${currentPos + 1}`;&nbsp; &nbsp; naviCtrl.removeCharacter(DOMstrings);&nbsp; &nbsp; naviCtrl.rightBtn(currentPos, chosenCharacter, newPosition);&nbsp; }});