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

Question

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

如果HTML元素（按钮，跨度，锚）具有附接的点击监听其去除本身（或它的容器）从DOM - 然后在稍后的点某些其他事件（例如：复位 ）将元素添加回来，即使没有鼠标悬停在元素上，元素仍然保持'：hover'状态，。

为什么确IE 9 & IE10（Win7）做到这一点？另外，是否有解决方法，而不诉诸一些setTimeout异步调用？

看看这个JSBin：从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 IE hover/active on remove/add

代码：

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，则：悬停问题在IE中得到修复。

我知道你说没有使用setTimeout，但我一直无法做出别的工作。

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