时间戳

首页 > 解决方案 > 按键事件未在右箭头键上触发

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

问题描述

我已经设置了一个按键事件，当用户单击键盘上的右箭头键时应该触发该事件。由于某种原因，它没有开火。使用 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();

标签： javascript

解决方案

事件侦听keypress器已被弃用，原样event.which。在这种情况下，您应该（可能）使用 use keydown，以及右箭头 ( ) 的正确键码ArrowRight，如下所示：

document.addEventListener("keydown", (event) => {
  if (event.keycode === "ArrowRight" || event.which === 39) {
    newPosition = `box-${currentPos + 1}`;
    naviCtrl.removeCharacter(DOMstrings);
    naviCtrl.rightBtn(currentPos, chosenCharacter, newPosition);
  }
});

推荐阅读