使用指针锁定/全屏幕无法使用keydown / keyup

时间:2012-04-01 20:50:38

标签: javascript html5 events javascript-events

我的问题是我最近开始更改我的HTML5 webapp以使用全屏+指针锁而不是在窗口中拖动鼠标。该应用程序除鼠标外还使用键盘,之前一切正常。但是,现在我无法使任何类型的按键工作。指针锁定鼠标工作正常。

以前我听过这样的按键:

document.onkeydown = handleKeyDown;
document.onkeyup = handleKeyUp;

其中handleKeyDown和Up是函数,例如:

function handleKeyUp(event) {
    doStuffWith(event.keyCode);
}

现在,我在mousemove监听器旁边添加了键盘监听器:

document.addEventListener('keyup', handleKeyUp(event), false);
document.addEventListener('keydown', handleKeyDown(event), false);

其中handleKey *与上面相同,但doStuffWith不执行任何操作。它似乎得到一些未定义的事件,没有别的。这可能是一个相当基本的问题,但我很难解决它。我在Google上找到的大多数示例和教程都不使用addEventListener,而是使用我之前使用的旧样式。

我非常感谢任何帮助。

编辑//澄清:由于事件未定义,doStuffWith根本没有被调用,因为在尝试读取未定义的.keyCode时执行停止

1 个答案:

答案 0 :(得分:1)

主要问题是,根据以下MDN页面,在全屏模式下禁用字母数字键:

https://developer.mozilla.org/en/DOM/Using_full-screen_mode#Things_your_users_want_to_know

您的代码也存在一些问题。在行

document.addEventListener('keyup', handleKeyUp(event), false);

...你有两个问题:第一,第二个参数需要是对函数的引用。它实际上是对undefined的引用,因为你是立即调用函数并传入结果而不是传入函数。其次,在支持addEventListener的浏览器中,Event对象会自动传递到事件侦听器函数中。因此,你想要的是:

function handleKeyUp(e) {
    doStuffWith(e.keyCode);
}

document.addEventListener('keyup', handleKeyUp, false);