Emscripten canvas + jQuery - 切换焦点

Question

我有一个HTML页面大致分为30% - 70%分为两个垂直列.左列包含聊天提要(通过Node和Socket.io处理),右列包含emscripten生成的canvas(ID为ID canvas).画布包含一个基本的3D世界,用户可以使用标准的第一人称控件进行导航(WASD用于移动,鼠标用于"外观").

默认情况下,画布会吞下所有键盘事件.我已在canvas初始化过程中使用以下代码修复此问题:

Module.preRun.push(function () {
    ENV.SDL_EMSCRIPTEN_KEYBOARD_ELEMENT = "#canvas";
});

这允许我手动关注聊天框,键入消息并提交.

我遇到的问题是,一旦聊天消息被提交,我尝试使用以下代码将焦点返回到画布(允许玩家使用WASD导航3D世界):

 $('#canvas').focus();

这名义上将焦点返回到画布,但鼠标和键盘移动不起作用.奇怪的是,单击选项卡/浏览器窗口然后进入画布似乎工作 - 焦点返回到画布,我可以再次导航.手动呼叫$(window).blur().focus()不起作用.

有人知道如何在发送聊天消息后将焦点强制回到画布吗？

- 更新 -

我hiddenField在画布后面添加了一个文本输入字段(ID为),我使用preRun函数将画布的关键事件分配给该字段(画布由于某种原因不能一致地工作).

这个工作正常,直到用户点击画布 - 例如,进入聊天字段 - 因此画布停止响应任何键盘或鼠标输入,即使我正在触发焦点回到hiddenField(并且可以看到它正在获取它) .

似乎在页面上做任何事情都与emscripten的聚焦行为(我相信与窗口对象相关)发生冲突,并阻止画布重新获得焦点.

当然有一些方法可以让emscripten画布与其他HTML元素一起生活吗？

Answer 1

我能够找到的最佳方法 - 实际上,让应用程序的独立方面(聊天和3D世界)正常工作的唯一方法是将emscripten画布嵌入iframe并使用跨框架功能必要时调用以触发操作.

Page
    - chat
    - iframe
        -- emscripten-generated page

这不是我的首选解决方案,但它是我唯一能够实现的解决方案.

Answer 2

您需要canvas通过添加tabindex="0"属性使对象成为焦点。

那么应该可以正确触发焦点事件：

document.querySelector("#canvas").focus()