javascript - JavaScript keyDown 不会触发

Question

我在显示幻灯片的模式窗口中有一个页面。目标受众是平板电脑用户，他们通过从右向左或从左向右滑动来浏览节目以查看下一张或上一张幻灯片。这一切都很好。

但是，如果有人确实使用计算机查看页面，我希望他们能够使用键盘上的箭头键进行导航。我能够检测到击键，但只有在用户在模式窗口内单击之后。我真的希望用户不必在键盘导航出现之前点击任何地方。我尝试什么似乎并不重要，这总是问题所在。

请注意，因为这是一个模态窗口，它通过使用 iFrame 来引入其内容。

这是代码。我已经确认它在页面加载时运行，并且 pageTurn 函数适用于其他事件：

document.onkeydown = function(e){   
    if (e == null) {
        keycode = event.keyCode;
    } else {
        keycode = e.which;
    }
    if(keycode == 37){
        pageTurn('right');
    } else if(keycode == 39){
        pageTurn('left');
    }   
};

Answer 1

尝试将事件附加到document.documentElement而不是仅仅document.

如果失败，请尝试添加document.body.focus()以确保文档已准备好接收键盘输入。

编辑：在 iFrame 内，事件需要附加到top.document.documentElement，或者附加到所有帧，如此处所述

Answer 2

document非常适合附加关键事件。此外，keyCode在所有主要浏览器中对于keydown和keyup事件都是正确的属性，所以没有必要搞乱which.

要从 iframe 中附加到父文档，正如您的评论之一所建议的那样，您需要使用parent（对于直接父文档的窗口）或top（最外层文档的窗口）：

parent.document.onkeydown = function(e) {
    e = e || parent.event;
    var keyCode = e.keyCode;
    if (keyCode == 37) {
        pageTurn('right');
    } else if (keyCode == 39) {
        pageTurn('left');
    }
};

Answer 3

也许你的关键代码是错误的。这是一个向您显示浏览器代码的页面：http: //asquare.net/javascript/tests/KeyCode.html

如果代码正确，请将此页面上的事件处理代码与您的版本进行比较。