Question

我遇到了有关键盘事件的问题，例如 keydown 事件。该应用程序是一个完全使用JavaScript和DOM操作构建的单页webapp。

所有键盘处理都由使用。

添加到文档的单个处理程序处理

document.addEventListener("keydown", handler, true);

该处理程序然后解码键盘事件并将内部键码委托给应用程序框架。

DOM树仅包含DIV元素和文本节点。

现在，当添加带有外部HTML文档的iframe，并且它包含可以获得焦点的元素时，将绕过原始处理程序。将键事件流恢复到原始处理程序的唯一方法是将焦点设置为主文档。

因此iframe添加的新文档似乎绕过了原始文档中的捕获/气泡事件链。

这已在chrome中测试以供参考，但实际应用程序在机顶盒中的嵌入式Web浏览器上运行，Web浏览器基于Webkit。

在机顶盒中没有鼠标接口，因此唯一的输入是来自遥控器的键事件。这会给我们带来问题，因为当我们使用iframe加载其他页面时，我们不想放松对关键事件的控制。

唯一的解决方案是使用事件处理程序进行DOM操作并检测何时添加iframe并将主键事件处理程序添加到新插入的文档中？或者是否有一种方法可以确保键事件处理程序始终接收浏览器窗口中的所有键事件。

修改

我刚刚意识到事件处理程序可以添加到窗口对象中，我也会尝试。

修改

将关键事件处理程序添加到窗口对象不会改变任何内容。

Answer 1

使用以下解决方法解决：

    document.addEventListener("DOMNodeInserted", function (event) {
        if(event.type === "DOMNodeInserted") {
            if(event.srcElement.nodeName === "IFRAME") {
                event.srcElement.addEventListener("keypress", function(kevent) {
                    document.dispatchEvent(kevent);
                    }, true);
             }
         }
    },true);

在捕获阶段，这会将子iframe中的关键事件传播到主文档中。

如何确保一个处理程序接收浏览器中的所有键盘事件

1 个答案: