JavaScript keyDown 不触发

Question

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

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

请注意，因为这是模态 window，所以它通过使用 iFrame 引入其内容。

这是代码。 我已经确认它在页面加载时运行，并且 pageTurn function 与其他事件一起工作：

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

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