时间戳

首页 > 解决方案 > Keyup 有效，而 keypress 无效 Vanilla JS

javascript - Keyup 有效，而 keypress 无效 Vanilla JS

问题描述

我有点重新学习 JS 并尝试在 vanilla JS 中制作模态窗口。所以，我的任务是让 Escape 按钮工作并在点击它时关闭模式。我发现当我在文档上放置 'keypress' 事件时，它无法工作，而 'keyup' 工作正常。我找不到关于为什么会这样的确切信息。我曾经使用 e.KeyCode 但发现它已被弃用。所以我主要有两个问题我找不到直接答案：

  1. 为什么键码不起作用？

  2. 2021 年处理键盘事件的最佳方式是什么？

这是代码。Console.log 不起作用。如果我将 keypress 更改为 keyup，一切正常。

document.addEventListener('keypress', function (e) {
  console.log('Event fired');
  if (e.key === "Escape" && !modal.classList.contains('hidden')) {
    closeModal();
  }
})

提前致谢。

此致，

瓦迪姆

标签： javascriptkeypresskeyup

解决方案

  1. 就像你说的“keyCode”已被弃用，但它仍然有效（见下面的例子）。
  2. 在您的情况下，最好的方法是使用 keyup 和 e.key。

您的代码按预期工作（使用任何其他键），但不会为Escape触发 keypress 事件。所以只能使用keydown和keyup。

document.addEventListener('keypress', function(e) {
  console.log('keypress fired; ', e.key);
})
document.addEventListener('keyup', function(e) {
  console.log('keyup fired; ', e.key);
  if(e.keyCode == '27') alert('Escape');
})

推荐阅读