Кнопка остается активной при добавлении в DOM

Question

Я столкнулся с действительно странной проблемой: IE9 и IE10 (только для Win7).

Если HTML элемент (кнопка, пролет, якорь) имеет прикрепленную щелчок слушателя, который удаляет себя (или его контейнер) из DOM - а затем на более позднем этапе некоторые другие события (например: сброс) добавляет элемент назад, элемент все еще остается в состоянии «: hover», даже без мыши, зависающего над элементом.

ПОЧЕМУ действительно делает IE 9 & IE10 (Win7) это? Кроме того, есть ли обходной путь, не прибегая к какому-то setTimeout async call?

Взгляните на эту 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, как описано ниже: проблема с зависанием исправлена ​​в IE.

Я знаю, что вы сказали без использования setTimeout, но я не смог сделать что-то еще.

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