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

Question

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

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

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

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

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

Answer 1

在玩了一段时间后，我发现了以下内容：

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

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

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