javascript - 切换器在 Javascript 中的实现

Question

我正在使用 Javascript 开发一个中型应用程序。我想创建一个类似于操作系统窗口切换器的切换器。当一个 UI 部分变为事件状态时，它应该使来自其他 UI 部分的所有事件监听器静音，并为事件 UI 提供对键盘和鼠标输入的独占访问权限。例如，事件面板上的 ctrl+c 将复制面板数据，而事件 Canvas 上的 ctrl+c 将复制选定的形状。面板和 Canvas 都包含在一个 View 中。

实现它的一种方法是利用观察者模式，让一个观察者独占访问其他观察者(切换器)，这将防止不需要的观察者干扰键盘和鼠标输入。

然而，这是一个实验性解决方案，目前使用 Javascript 实现此功能的巧妙方法是什么？

Answer 1

要派发键盘事件的元素必须具有焦点。但是，默认情况下，某些 HTML 元素(例如 div 和 canvas)不能将焦点放在它们上面。但是，如果您设置 tabIndex 属性，它们也将是可聚焦的。

function keypress() {
  console.log("works");
}

document.getElementById("element").focus();

<canvas width="10" height="10" tabIndex="0" onkeydown="keypress()" id="element"></canvas>