Javascript 中的切换器实现答案

【问题标题】：Switcher implementation in JavascriptJavascript 中的切换器实现
【发布时间】：2016-04-30 15:47:04
【问题描述】：

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

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

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

【问题讨论】：

我认为这实际上更像是一个 HTML/CSS 问题——阅读名为 pointer-events developer.mozilla.org/en-US/docs/Web/CSS/pointer-events 的 CSS 属性
@JeremyJStarcher 感谢您的参考，我不知道这个很酷的 CSS 功能。然而，这似乎并没有解决调度键盘输入的问题，例如，与不能监听 div 或画布上的按键事件的输入元素相比，因此必须在窗口级别捕获这些事件并进行调度给积极的观察者。
在 ES6 中没有什么真正的新东西可以让你做这件事与你在 ES5 中做的完全不同。如果你想避免观察者模式，你应该看看函数响应式编程。
您可以在 div 或画布上监听关键事件。请参阅此示例：jsfiddle.net/dtq8zdov
@GökhanKurt 这是一个很棒的解决方案！请将其作为答案发布，因为它回答了我的问题，获得赏金！

标签： javascript design-patterns ecmascript-6

【解决方案1】：

对于调度键盘事件的元素，它必须具有焦点。但是，默认情况下，一些 HTML 元素，如 div 和 canvas 不能关注它们。但是，如果您设置 tabIndex 属性，它们也将是可聚焦的。

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

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

&lt;canvas width="10" height="10" tabIndex="0" onkeydown="keypress()" id="element"&gt;&lt;/canvas&gt;

【讨论】：

很好的解决方案，谢谢！由于 StackOverflow 的奖励机制强制延迟，18 小时内的赏金......
你的问题够吗？