Question

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

我有角度加载一个html叠加层，它占据了右侧宽度为20％的一列。

我使用类似的东西知道事件发生的位置 - Javascript event handler on body but not on input

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

即使我单击3d场景并启动键盘事件，也会输入目标。

我必须删除html叠加层，然后所有未来的键盘事件都有目标体。

如何在不删除html叠加层的情况下允许用户切换事件目标？

Answer 1

目标将设置为当前关注的元素。您所要做的就是确保在单击它后模糊复选框。您可以编写一个非常简单的指令来执行此操作。例如：

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，所以你可以看到它的实际效果，尝试点击复选框，然后输入键：

http://plnkr.co/edit/mzxjdBKfz59Ec0R9oq1K?p=preview

如果删除“无焦点”指令，它会在您按下键时将输入记录到控制台。如果您有“无焦点”，即使您点击了复选框，它也会记录<body>。

如何切换浏览器事件目标

1 个答案: