问题描述
我正在重新学习 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();
}
})
提前致谢。
最好的问候,
瓦迪姆
解决方法
- 如您所说,“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");
}