Javascript 如何切换浏览器事件目标

我有一个基于three.js的3d场景，它占据了整个窗口

我已经加载了一个html覆盖，它占据了右侧大约20%宽度的列

我使用类似的方法来了解事件发生的位置 -

现在的问题是在我点击html覆盖上的复选框之后。任何未来的键盘事件（例如，用于在我的3d场景中移动相机的w、a、s、d）都有target=input

即使我点击3d场景并初始化键盘事件，目标也会被输入

我必须删除html覆盖，然后所有未来的键盘事件都有目标体

---

如何允许用户在不删除html覆盖的情况下切换事件目标

目标将设置为当前聚焦的元素。您所要做的就是确保在单击复选框后使其模糊。您可以编写一个非常简单的指令来实现这一点。例如：

app.directive("noFocus", function() {
  return function(scope, element) {
    element.find("input").on("focus", function(ev) {
      ev.target.blur();
    });
  };
});

然后，您可以在html覆盖上使用它：

 <div no-focus>
          Things inside here should lose focus immediately.

          Click Here: <input type="checkbox" />
          <p>
          After clicking on the checkbox it should still log the body as the target on keypresses.  
          </p>


    </div>

这里的东西应该马上失去焦点。
单击此处：

单击复选框后，它仍应在按键时将身体记录为目标。

这是一个plunkr，您可以看到它的作用，请尝试单击复选框，然后键入键：

---

如果删除“no focus”（无焦点）指令，则按键时会将输入记录到控制台。如果您有“无焦点”，即使您单击了复选框，它也会记录

。

可以通过收听复选框中的更改并立即使其模糊来完成。只是一个想法，还没有完成。到目前为止，你的代码在哪里？一个简化的plnkr将不胜感激