IE9 - 添加和删除 DOM 元素会破坏父 keydown 事件

Question

我们正在构建一个相当复杂的 UI 控件（实际上是一个数据网格），并在用户滚动网格时从 DOM 树中动态添加/删除节点（并尝试以尽可能高的性能进行操作）。

我们在 IE9 和 IE10 中注意到，当我们从节点添加/删除子元素时，它会停止触发其 keydown 事件：

看这个小提琴： http://jsfiddle.net/T2Lt8/13/

您可以看到，在两个左右的 keydown 事件之后，父级停止触发。但是，如果我在 keydown 处理程序中取消注释 $(child).focus() 行 - 一切正常。

发生了什么，这是解决此问题的最佳方法吗？

Answer 1

在玩了一会儿例子之后，我发现了以下几点：

1. 如果您添加 child.style.border = "1px solid red";，您会看到创建了第二个孩子，因为第一个孩子没有被删除。这是因为有whitespace in the parent。

2. 孩子比父母大。如果您将父级设置为 150 像素 x 150 像素并且只单击父级而不是子级，则关键事件会正确且重复地工作。看来 IE9 确实保留了绑定。

3. 如果孩子是像textarea 这样“不透明”的东西，它似乎会使 Firefox 的行为类似于我们在 IE9 中看到的行为。