javascript - 切换器在 Javascript 中的实现

标签 javascript design-patterns ecmascript-6

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

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

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

最佳答案

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

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

document.getElementById("element").focus();
<canvas width="10" height="10" tabIndex="0" onkeydown="keypress()" id="element"></canvas>

关于javascript - 切换器在 Javascript 中的实现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36956932/

相关文章:

wpf - MVVM 中的 ViewModel 是否应该引用 View?

javascript - ES2015 导入在 Firefox 中不起作用(即使在顶级)

javascript - 使用字符串键映射嵌套 JavaScript 对象,然后过滤列表

javascript - 如何确定如何导入模块

javascript - 在 javascript 中创建 "new function"别名的最短方法

javascript - 如何在另一个函数中访问一个函数

java - 灵活的界面设计模式

ruby-on-rails - Rails 中的胖模型瘦 Controller

javascript - DynamoDB - 如何在一次更新中创建 map 并向其添加属性

javascript - NodeJS 代码不工作