Question

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

如果一个HTML元素（按钮，span，anchor ）有一个附加的点击监听器，它会从DOM中删除它自己（或它的容器） - 然后在稍后的某个其他事件（例如： reset ）将元素添加回来，即使没有鼠标悬停在元素上，元素仍然保持在'：hover'状态，。

为什么是IE 9＆amp; 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);

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

1 个答案: