我用这段代码显示/隐藏 div 元素。它工作正常，但是一旦应用程序进入全屏模式，div 元素就会停止更新。也就是说，当全屏显示时，CSS 中的更改不再起作用/更新
document.addEventListener("keypress", function (event) {
if (event.keyCode == 122) {
disableCartModal();
}
if (event.keyCode == 120) {
enableCartModal();
}
});
function disableCartModal() {
document.getElementById("cart-modal").style.display = "none";
}
function enableCartModal() {
document.getElementById("cart-modal").style.display = "block";
}
我尝试了你的代码，发现它在 firefox 和 chrome 中都可以工作......我在控制台中添加了一些调试以确保事情按预期进行。我建议在您的代码中添加一些调试语句，以确保达到您的预期。
还要确保您正在测试的文档部分具有焦点 - 测试，我发现如果选择了框架/开发人员工具，则不会处理该事件。
另请注意，正如 Bastian 指出的那样，这不是在现代浏览器中执行键盘事件的推荐方式。支持可能会消失。
window.addEventListener(
"keydown",
(event) => {
console.log("evt fired: " + event.key);
if (event.key == "z") {//z
console.log("z");
disableCartModal();
}
if (event.key == "x") {//X
console.log("x");
enableCartModal();
}
},
true
);
<!DOCTYPE html>
<html>
<head>
<title>keytest</title>
</head>
<body>
<div>Precart</div>
<div id="cart-modal">Cart</div>
<div>Postcart</div>
<script>
console.info("script commencing");
document.addEventListener("keypress", function (event) {
console.log( "evt fired: "+ event.keyCode);
if (event.keyCode == 122) {//Z
console.log( "Z");
disableCartModal();
}
if (event.keyCode == 120) {//X
console.log( "X");
enableCartModal();
}
});
function disableCartModal() {
document.getElementById("cart-modal").style.display = "none";
}
function enableCartModal() {
document.getElementById("cart-modal").style.display = "block";
}
console.info("script done");
</script>
</body>
</html>