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

Question

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

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

看这个 fiddle : http://jsfiddle.net/T2Lt8/13/

您可以看到，在大约两次按键事件之后，父级停止触发。但是，如果我取消注释 keydown 处理程序中的 $(child).focus() 行 - 一切都会起作用。

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

Answer 1

在使用示例一段时间后，我发现了以下内容:

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

2. child 比 parent 大。如果将父级设置为 150 像素 x 150 像素，并且仅单击父级而不是子级，则按键事件将正确且重复地工作。看来 IE9 确实保留了绑定(bind)。

3. 如果子元素是“不透明”的东西，例如 textarea，那么 Firefox 的行为似乎与我们在 IE9 中看到的行为类似。