我有一个基于 three.js 的 3d 场景，它占据了整个窗口。
我有一个 html 叠加层的 Angular 加载，它占据了右侧 enarly 20% 宽度的列。
我正在使用与此类似的方法来了解事件发生的位置 - Javascript event handler on body but not on input
现在的问题是在我单击 html 叠加层上的复选框之后。任何 future 的键盘事件(例如用于在我的 3d 场景中移动相机的 w、a、s、d)都有 target = input。
即使我点击 3d 场景并启动键盘事件，目标也会被输入。
我必须删除 html 覆盖，然后所有 future 的键盘事件都有目标主体。
如何允许用户在不移除 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，因此您可以看到它的实际效果，尝试单击复选框然后键入键:
http://plnkr.co/edit/mzxjdBKfz59Ec0R9oq1K?p=preview
如果您删除“无焦点”指令，它将在您按下按键时将输入记录到控制台。如果您有“无焦点”，它将记录 <body>即使您已单击复选框。
关于javascript - 如何切换浏览器事件目标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20496060/