JavaScript：分配焦点后的关键事件处理

Question

在我的应用程序中，我需要创建自定义弹出窗口，但在尝试关闭它们时遇到了问题。要打开弹出窗口，用户需要在选择菜单项时点击“ENTER”。从那里弹出菜单，提供关闭按钮焦点，并在选择“关闭”或“提交”项目时点击“ENTER”后关闭。

当用户尝试关闭弹出窗口时，它会关闭，但由于关闭函数没有消耗关键事件，因此最终会再次打开它。

目前，我在文档中有一个用于启用导航的 onkeyup 事件的键事件函数，然后我尝试将弹出关闭函数分配给 onclick、onkeyup 和 onkeypress，但无论我尝试哪个，总是按“ENTER”弹出窗口关闭后最终到达主键事件功能。

我当前的快速修复是使用两个额外的布尔值，一个在弹出窗口关闭后变为真，另一个在主键事件函数看到第一个布尔变为真后变为真（因为只有一个布尔变为真关闭窗口后，由于某种原因仍然允许事件到达主要功能）。

因为我需要在离开弹出窗口时选择相同的菜单项，取消选择菜单项，保存它的位置，然后返回它也需要更多的全局变量。

我主要是想知道是否有更好的方法来做到这一点，因为我不希望有两个额外的全局变量在周围浮动......

Answer 1

尝试使用 event.preventDefault (info here)。向下滚动到标题为“防止默认”的部分

Answer 2

更新：我已经回答了几乎相同的问题，只是在不同情况下按空格键。你去：Check it out.

---

此外，标志也没有那么糟糕。如果您担心全局命名空间（这是一个很好的做法），您可以做两件事。

1. 函数是对象。它们可以在每次调用时使用属性（如果您愿意，可以使用静态变量）。

function handler() {
  if ( handler.opened ) {
    // close window
    // ...
    handler.opened = false;
  } else {
    // open window
    // ...
    handler.opened = true;
  }
}

// initialize property
handler.opened = false;