输入模糊后无法获得焦点返回到 div

Question

http://jsfiddle.net/NsRyr/1/

我完全被这件事难住了。这就是我想要做的事情：我有一个 div 元素（称之为#keys），我用它来处理按键事件。

HTML：

<div id="#keys" tabindex="1">Focus</div>

JS：

$('#keys').keydown(function () {
    $('#log').append('*'); // just note that an event happened
});

这按预期工作——只要#keys 被聚焦，我就可以接收按键事件并响应它们。此外，我可以将焦点设置到其他 div 元素，并且按键事件将不再由#keys 处理。然后我可以重新聚焦 div（例如，通过直接单击它，或者通过响应另一个 DOM 元素上的 click 事件）并按预期处理按键事件。

到目前为止，一切都很好。我遇到的问题是，如果我聚焦一个输入元素，然后尝试通过设置一个blur 处理程序来重新聚焦#keys，该处理程序在离开输入后被激活，#keys div 不会收到重点 ！如果我通过单击模糊输入，它可以正常工作，但如果我使用键盘则不行。

$('#input').blur(function () {
    $('#log').append('blur'); // note that a blur happened
    $('#keys').focus();
});

我认为这个问题的本质是，为什么我在#input 上的blur 处理程序在离开输入时似乎不能正常工作（但在点击离开时它确实工作正常）？这只是浏览器的怪癖吗？ （我在 Mac OS 上使用 Chrome 30.0.1599.101。）

这是我关于 JS 的第一个 SO 问题，所以请让我知道我可以提供哪些额外的细节来描述这种情况。

（编辑：有趣的是，如果我将制表符从 #input 移开，它似乎工作正常。仍然对这里发生的事情感到困惑；似乎是某种与 tabindex 相关的问题？）

Answer 1

我还没有评论权限，所以我必须回答，但是请模组应该改变这个，因为它基本上是重复的。

这是你的小提琴的修复： http://jsfiddle.net/NsRyr/3/

问题（如this answer 中所述）是模糊事件在更改完成之前触发，因此需要将焦点向下发送到堆栈以在之后发生。添加计时器可以解决这个问题。

我更改的行是：

setTimeout($('#keys').focus.bind($('#keys')), 0);

这样它就会等到新的焦点事件完成后再触发处理程序。