Question

我试图在esc印刷机上关闭我的模式（删除了一个将其设置为display: block的类）。这是我尝试过的方法（该方法无效，并且破坏了我的其余代码）：

if (modal.classList.contains('modal-visible')) {
  document.addEventListener('keypress', function(e) {
    let keyCode = e.keyCode;
    if (keyCode === '27') {
      modal.classList.remove('modal-visible');
    }
}

这是我的JS文件中用于模式的其他代码：

const modal = document.getElementById('myModal');
const closeIcon = document.querySelector('.close');

// When called, adds class that sets modal to display: block when player reaches water
function bringUpModal() {
  modal.classList.add('modal-visible');
}

// Closes modal (adding class that sets it back to display: none) upon user's clicking its close icon
closeIcon.addEventListener('click', function() {
  modal.classList.remove('modal-visible');
});

// Opens modal when player reaches water
Player.prototype.update = function(dt) {
    if (this.y === 25) {
        bringUpModal();
        this.y = 400;
    }
};

这是必需的，但以防万一，这也是我的模态CSS：

.modal {
  display: none;
  width: 33%;
  height: 30%;
  margin: 0 auto;
  background-color: #f1f0f0;
  border: 1px solid #c5c4c4;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Added by function bringUpModal() */
.modal-visible {
  display: block;
}

.modal-content {
  margin: 0 auto;
  padding: 30px;
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Answer 1

如果仅在模式可见时创建事件侦听器，则将永远不会创建它。将模式显示为之后不会重新执行代码。 if检查已经发生，已经失败，并且keydown的事件侦听器已经创建 not 。绝对不会创建它。

var x = 2;
if (x === 1) {
  alert('yes');
}
x = 1;

在上面的示例中，即使x最终成为1，也从未发生过警报。同样，您的事件监听器也永远不会创建。

同时，keyCode是整数，而不是字符串。您将要使用27而不是'27'。

Answer 2

在页面加载时为模式添加事件侦听器，而不是在模式可见时添加事件侦听器。另外，请使用var x = NaN; if(x) { console.log("True"); } else if(!!x) { console.log("False"); }事件而不是keydown，因为在某些浏览器中，只有在按键输出字符时才会触发keypress事件

keypress

.modal {
  display: none;
  width: 33%;
  height: 30%;
  margin: 0 auto;
  background-color: #f1f0f0;
  border: 1px solid #c5c4c4;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Added by function bringUpModal() */
.modal-visible {
  display: block;
}

在ESC上关闭模态（纯JS）

2 个答案: