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

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) => {

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

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

    naviCtrl.removeCharacter(DOMstrings);

    naviCtrl.rightBtn(currentPos, chosenCharacter, newPosition);

  }

});