Three.js场景移入div后keydown/keyup事件失效问题求助

问题情况 #

原本在window对象上绑定keydown、keyup及pointer系列事件，实现Three.js场景的快捷键功能，代码运行正常。但将场景移入id为canvasWrapper的div容器后，pointer系列事件仍能正常工作，keydown和keyup事件却失效。

解决方案 #

为canvasWrapper div元素添加tabindex="0"属性即可恢复键盘事件功能。

修改后的容器标签示例：

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

原因说明 #

默认状态下，div这类非交互元素不具备焦点能力，无法捕获键盘事件。添加tabindex="0"后，该元素会变为可聚焦状态，从而能够接收keydown和keyup事件。

内容的提问来源于stack exchange，提问作者Icarus