重新添加到 DOM 时按钮保持活动状态

Question

IE9 和 IE10（仅限 Win7） 遇到了一个非常奇怪的问题。

如果一个 HTML 元素（button、span、anchor）有一个附加的点击监听器，它会从 DOM 中删除自己（或它的容器）——然后在稍后一些其他事件（例如: reset) 重新添加元素，元素仍然保持在 ':hover' 状态，即使没有鼠标悬停在元素上。

为什么 IE 9 和 IE10 (Win7) 会这样做？此外，是否有一种解决方法，而不诉诸一些 setTimeout 异步调用？

看看这个 JSBin：IE hover/active on remove/add

来自 JSBin 的代码

<div id="outer" style="border: 2px solid green; padding: 10px;">
    <div id="container" style="border: 2px solid black; padding: 5px;">
        <button id="button">Hide Me</button>
    </div>
</div>
<button id="reset" style="margin-top: 20px">Reset</button> 

还有 JS：

var outer = document.getElementById('outer');
var container = document.getElementById('container');
var button = document.getElementById('button');
button.addEventListener('click', function() {
    outer.removeChild(container);
}, false);

var reset = document.getElementById('reset');
reset.addEventListener('click', function() {
    outer.appendChild(container);
}, false);

Answer 1

我倾向于这是 IE 中的一个错误，如果从 DOM 中删除元素，则样式不会正确刷新。但是，似乎如果您按照下面的方法删除容器 div，则 :hover 问题在 IE 中已修复。

我知道你说没有使用 setTimeout，但我无法让其他东西起作用。

button.addEventListener('click', function() {
  window.setTimeout(function() {
    outer.removeChild(container);
  }, 1);
}, false);