我有一个 HTML 页面，大致将 30% - 70% 分为两个垂直列。左列包含聊天提要(通过 Node 和 Socket.io 处理)，右列包含 emscripten 生成的 canvas(ID 为 canvas)。 Canvas 包含一个基本的 3D 世界，用户可以使用标准的第一人称控件(WASD 用于移动，鼠标用于“看”)进行导航。
默认情况下， Canvas 会吞下所有键盘事件。我在 Canvas 初始化过程中使用以下代码解决了这个问题:
Module.preRun.push(function () {
ENV.SDL_EMSCRIPTEN_KEYBOARD_ELEMENT = "#canvas";
});
这让我可以手动关注聊天框、输入消息并提交。
我遇到的问题是，在提交聊天消息后，我尝试使用以下代码将焦点返回到 Canvas (以允许玩家使用 WASD 导航 3d 世界):
$('#canvas').focus();
这名义上将焦点返回到 Canvas ，但鼠标和键盘移动不起作用。奇怪的是，单击选项卡/浏览器窗口然后进入 Canvas 似乎可行 - 焦点返回到 Canvas ，我可以再次导航。手动调用 $(window).blur().focus() 不起作用。
有谁知道发送聊天消息后如何将焦点强制返回 Canvas ？
-- 更新--
我在 Canvas 后面添加了一个文本输入字段(ID 为 hiddenField)，我正在使用 preRun 函数将 Canvas 的关键事件分配给该字段( Canvas 不是' t 由于某种原因一直工作)。
这工作正常直到用户点击离开 Canvas - 例如，进入聊天字段 - 于是 Canvas 停止响应任何键盘或鼠标输入，即使我触发焦点回到hiddenField(并且可以看到它正在获取它)。
似乎在页面上做任何都与 emscripten 的聚焦行为(我相信是绑定(bind)到窗口对象)冲突并阻止 Canvas 重新获得焦点。
肯定有某种方法可以让 emscripten Canvas 与其他 HTML 元素共存吗？
最佳答案
您需要通过添加 tabindex="0" 属性使 canvas 对象可聚焦。
那么应该可以正常触发focus事件了:
document.querySelector("#canvas").focus()
关于javascript - Emscripten canvas + jQuery - 切换焦点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45936800/