輸入模糊后無法獲得焦點返回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的第一個問題，所以請讓我知道我可以提供哪些額外的細節來描述這種情況。

（編輯：有趣的是，如果我從#input轉移標簽，它似乎工作正常。仍然混淆了這里發生的事情;似乎是某種與tabindex相關的問題？）

Answer 1

我還沒有評論權限，所以我必須回答，但請mods改變這一點，因為它基本上是重復的。

這是你小提琴的修復： http ： //jsfiddle.net/NsRyr/3/

問題（如本答案中所述 ）是模糊事件在更改完成之前觸發，因此焦點需要在堆棧之后發送。 添加計時器可以解決問題。

我改變的路線是：

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

這樣就可以等到新焦點事件完成后再觸發處理程序。