Javascript Emscripten画布+；jQuery-切换焦点

我有一个HTML页面，大约30%-70%分为两个垂直列。左栏包含聊天提要（通过Node和Socket.io处理），右栏包含emscripten生成的

canvas

（ID为

canvas

）。画布包含一个基本的3D世界，用户可以使用标准的第一人称控件（WASD用于移动，鼠标用于“查看”）进行导航

默认情况下，画布接受所有键盘事件。在画布初始化过程中，我使用以下代码修复了此问题：

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

这使我可以手动关注聊天框，键入消息并提交

我遇到的问题是，一旦提交了聊天信息，我会尝试使用以下代码将焦点返回到画布（以允许玩家使用WASD导航3d世界）：

这名义上会将焦点返回到画布，但鼠标和键盘移动不起作用。奇怪的是，单击选项卡/浏览器窗口，然后进入画布似乎起了作用-焦点返回到画布，我可以再次导航。手动调用

$（window.blur（）.focus（）

）不会起作用

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

--更新--

我在画布后面添加了一个文本输入字段（ID为

hiddenField

），并使用preRun函数将画布的关键事件分配给该字段（画布由于某种原因无法持续工作）

直到用户点击画布（例如，进入聊天区），画布停止响应任何键盘或鼠标输入，即使我触发焦点回到

hiddenField

（并且可以看到它得到了它），这一切都很正常

似乎在页面上做任何事情都会与emscripten的聚焦行为（我相信与窗口对象相关）冲突，并阻止画布重新获得焦点

---

当然有办法让emscripten画布与其他HTML元素共存？

这是我能找到的最好的方法——事实上，这是获得应用程序各个方面（聊天和3D世界）的唯一方法工作正常-已将emscripten画布嵌入到

iframe

中，并在必要时使用跨帧函数调用来触发操作

Page
    - chat
    - iframe
        -- emscripten-generated page

---

这不是我的首选解决方案，但它是我唯一能成功使用的解决方案。

您需要通过添加

tabindex=“0”

属性使

canvas

对象可聚焦

然后应该可以正确触发焦点事件：

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

编辑：

Page
    - emscripten-generated-page
       - loop
    - chat
    - script to handle global key input handlers

通过查看完整演示（包括指向

.js

资源的链接）

结构：

Page
    - emscripten-generated-page
       - loop
    - chat
    - script to handle global key input handlers

必须在canvas元素上设置

tabindex

（如和所述），通过JavaScript的内置

文档

接口连接全局事件侦听器，然后调用

.triggerHandler（）

以确保canvas返回默认状态，由

单击

控制：

var chatInputField = $("#message-input");
var canvas = $("#canvas");


canvas.on("click", function(e){
  return document.addEventListener("keyup", game.toggleKeys);
});

chatInputField.on("focusin", function(e) {
    $('#canvas').attr('tabindex', 0);
    return document.removeEventListener("keyup", game.toggleKeys, false);
});

chatInputField.on("focusout", function(e) {
    $("#canvas").triggerHandler('click');
    chatInputField.attr('tabindex', 0);
});

我已经测试过了，它是有效的。下面是我的app.js文件，用于管理密钥输入（参见第297行）

警告：您必须在游戏画布中明确定义

选项卡

键的行为