1

我在使用IE9和IE10 (Win7 only)时遇到了一个非常奇怪的问题。

如果一个 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);
4

1 回答 1

1

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

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

button.addEventListener('click', function() {
  window.setTimeout(function() {
    outer.removeChild(container);
  }, 1);
}, false);
于 2013-09-28T04:23:43.617 回答