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

Posted 2023-05-09

【中文标题】IE9 - 添加和删除 DOM 元素会破坏父 keydown 事件

【英文标题】：IE9 - adding and removing DOM element breaks parent keydown event

【发布时间】：2012-08-29 14:58:01

【问题描述】：

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

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

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

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

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

【参考方案1】：

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

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

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

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