CODEWITHSUNDEEP
javascripthtmldominternet-explorer-9internet-explorer-10
Saad Malik
Saad Malik

Reputation: 1648

Button remains active when re-added to DOM

I've been experiencing a really bizarre issue with IE9 and IE10 (Win7 only).

If an HTML element (button, span, anchor) has an attached click listener which removes itself (or it's container) from the DOM--and then at a later point some other event (e.g: reset) adds the element back, the element still remains in ':hover' state, even without the mouse hovering on the element.

WHY does IE 9 & IE10 (Win7) do this? Also, is there a workaround, without resorting to some setTimeout async call?

Take a look at this JSBin: IE hover/active on remove/add

Code from 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>

And the 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);

Upvotes: 1

Views: 118

Answers (1)

Jesse
Jesse

Reputation: 8393

I'm leaning towards this being a bug in IE were if the element is removed from the DOM the styles aren't being refreshed correctly. However it seems that if you remove the container div as per below the :hover issue is fixed in IE.

I know you said without the use of setTimeout, but I haven't been able to make something else work.

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

Upvotes: 1

Related Questions