【问题标题】:How to make sure that all keyboard events in the browser is received by one handler如何确保浏览器中的所有键盘事件都被一个处理程序接收
【发布时间】:2010-11-02 19:03:10
【问题描述】:

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

所有键盘处理都由添加到文档的单个处理程序使用。

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

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

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

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

所以看起来 iframe 添加的新文档绕过了原始文档中的捕获/冒泡事件链。

这个已经在chrome中测试过供参考,但实际应用运行在机顶盒中的嵌入式网络浏览器上,网络浏览器是基于Webkit的。

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

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

编辑

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

编辑

将键事件处理程序添加到窗口对象并没有改变任何东西。

【问题讨论】:

    标签: webkit keyboard-events mashup dom-events


    【解决方案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 传播到主文档。

    【讨论】:

    • 这似乎适用于我注入此脚本的每个页面,除了 gmail。任何想法为什么?
    猜你喜欢
    • 2012-07-11
    • 2021-09-07
    • 2013-05-22
    • 1970-01-01
    • 1970-01-01
    • 2010-11-08
    • 2011-03-18
    • 2012-01-23
    • 1970-01-01
    相关资源
    最近更新 更多