javascript - 用Javascript实现切换器

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

实现它的一种方法是利用观察者模式，该观察者模式将使一个观察者拥有对其他观察者（切换器）静音的独占访问权，这将防止不需要的观察者干扰键盘和鼠标的输入。

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

最佳答案

为了使元素能够调度键盘事件，它必须具有焦点。但是，默认情况下，某些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>