Question

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

为什么键码不起作用？
2021 年处理键盘事件的最佳方式是什么？

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

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

提前致谢。

最好的问候，

瓦迪姆

Answer 1

如您所说，“keyCode”已被弃用，但它仍然有效（请参见下面的示例）。
就您而言，最好的方法是使用 keyup 和 e.key。

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

int rowsAffected = ProjectDal.AddBookingInfo(GroomOptionComboBox.Text, HairComboBox.Text, TeethComboBox.Text, NailsComboBox.Text, AppointmentDateTimePicker.Text, CustomerStatusComboBox.Text, Convert.ToString(StartingTime), Convert.ToString(FinishTime), Convert.ToString(duration), AllPrice);

if (rowsAffected > 0)
{
    MessageBox.Show("Booking successfully added", "Success");
    int rowsAffected2 = ProjectDal.AddBooking(Convert.ToInt32(DogIDComboBox.Text), Convert.ToInt32(ClientIDComboBox.Text));

    if (rowsAffected2 > 0)
    {
        MessageBox.Show("Booking successfully added", "Success");
    }
    else
    {
        MessageBox.Show("Booking not successful", "Failure");
    }
}
else
{
    MessageBox.Show("Booking not successful", "Failure");
}

Keyup 有效，而 keypress 无效 Vanilla JS

1 个答案: