javascript - 输入模糊后无法将焦点返回到 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 事件)，并且按键事件将按照我的预期进行处理。

到目前为止，一切都很好。我遇到的问题是，如果我聚焦一个输入元素，然后尝试通过设置一个在 Tab 键离开后激活的 blur 处理程序来重新聚焦 #keys输入时，#keys div 未获得焦点!如果我通过单击模糊输入，效果很好，但如果我使用键盘，则效果不佳。

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

我认为这个问题的本质是，为什么我的 #input 上的 blur 处理程序在远离输入时似乎无法正常工作(但确实如此)点击离开时可以正常工作)？这只是浏览器的怪癖吗？ (我在 Mac 操作系统上使用 Chrome 30.0.1599.101。)

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

(编辑:有趣的是，如果我将 tab 键从 #input 移开，它似乎工作正常。仍然困惑这里发生的事情；似乎是某种与 tabindex 相关的问题？)

Answer 1

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

这是对你的 fiddle 的修复: http://jsfiddle.net/NsRyr/3/

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

我更改的行是:

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

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