IE9 - 添加和刪除DOM元素中斷父級keydown事件

Question

我們正在構建一個相當複雜的UI控件（實際上是一個數據網格），並在用戶滾動網格時動態添加/刪除DOM樹中的節點（並嘗試執行它具有儘可能高的性能）。

我們已經在IE9 & IE10注意到，當我們添加/從節點刪除子元素，它停止了射擊keydown事件：

看到這個小提琴： http://jsfiddle.net/T2Lt8/13/

你可以看到，經過只有兩次或兩次以上的活動，父母停止射擊。但是，如果我取消註釋keydown處理程序中的$(child).focus()行 - 這一切都可行。

這是怎麼回事，這是解決這個問題的最佳方法嗎？

Answer 1

與例如玩了一會兒後，我發現了以下幾件事：

1. 如果添加child.style.border = "1px solid red";你看，作爲第一個未被排除的第二個孩子被創建。這是因爲有whitespace in the parent。

2. 孩子比父母大。如果您將父級150像素設置爲150px，並且只需單擊父級而不是子級，則關鍵事件將正確並重復地工作。看來IE9確實保持了綁定。

3. 如果孩子像textarea那樣「不透明」，它似乎會使Firefox看起來像我們在IE9中看到的行爲。