将 keyup 和 keydown 事件监听器添加到 div

Question

我有一个threejs场景，它使用'keyup'和'keydown'事件监听器来实现一些热键，就像这样

//works
window.addEventListener('keydown', (e) => this.onKeyDown(e), false);
window.addEventListener('keyup', (e) => this.onKeyUp(e), false);
window.addEventListener('pointerup', (e) => this.onPointerUp(e), false);
window.addEventListener('pointermove', (e) => this.onPointerMove(e), false);
window.addEventListener('pointerdown', (e) => this.onPointerDown(e), false);

上面的代码工作正常。 当我将场景移动到 div 并将代码更改为以下内容时出现问题

//working
this.container.addEventListener('pointerup', (e) => this.onPointerUp(e), false);
this.container.addEventListener('pointermove', (e) => this.onPointerMove(e), false);
this.container.addEventListener('pointerdown', (e) => this.onPointerDown(e), false);
//not working
this.container.addEventListener('keydown', (e) => this.onKeyDown(e), false);
this.container.addEventListener('keyup', (e) => this.onKeyUp(e), false);

由于某些原因，keydown 和 keyup 事件监听器停止工作，但指针事件监听器都工作正常。

容器看起来像这样

this.container = document.getElementById('canvasWrapper');

任何帮助，将不胜感激

编辑：就像评论中提到的Behrouz一样，为'canvasWrapper' div设置tabindex解决了这个问题，即

<div id = "canvasWrapper" tabindex="0">

Answer 1

在大多数语言中， this指向 object 的给定实例。 简单的。

另一方面，JavaScript this指针是一个需要大量阅读和反复试验才能理解的主题。

问题出在关键函数的调用方式上。

该事件将由window object 触发。

在 JavaScript 中，调用 object、 window在这种情况下成为this指针。

您需要绑定 function 调用以确保this指针指向预期的 object。

这是一个例子：

var x = {
    message: 'hello',
    init: function () {
        this.addEventListener('keyUp', sayMessage)
    },
    sayMessage: function () {
       console.log(this.message);
    }
}

x.init();

// called directly prints hello
x.sayMessage()

// called from the event lister
// Error: window.message is undefined

将指针绑定到您的 object：

x.sayMessage.bind(x)