CODEWITHSUNDEEP
google-chromeeventsdom-eventsmicrosoft-edgeaddeventlistener
user3621633
user3621633

Reputation: 1721

Error when calling removeEventListener in IE11/Edge on closed window, yet works in Chrome and Firefox

I created a JSFiddle to showcase the behavior. I've observed IE11/Edge behaves one way and Chrome and Firefox behave another way and I'm not sure which one is of the two cases is a bug or design flaw.

https://jsfiddle.net/vuprp9k9/

HTML:

<div id="output">placeholder</div>
<button id="addEvtPopup">Add Event to Pop-up Window</button>
<button id="removeEvtPopup">Remove Event from Pop-up Window</button>
<button id="popupBtn">Open Pop-up Window</button>

JavaScript:

var output = document.getElementById("output");
var addEvtPopupBtn = document.getElementById("addEvtPopup");
var removeEvtPopupBtn = document.getElementById("removeEvtPopup");
var popupBtn = document.getElementById("popupBtn");
var popupWin = null;

function myHandler(evt) {
  output.innerHTML = output.myParam;
}

popupBtn.onclick = function() {
  // Observe the variable referencing the pop-up Window
  popupWin = window.open("", "myPopupWin", "width=100px, height=100px, top=500px, left=-1000px");
};

addEvtPopupBtn.onclick = function() { 
  popupWin.addEventListener("unload", myHandler, false);
  output.innerHTML = "Pop-up Event added";
  output.myParam = "Pop-up Event unloaded";
  popupBtn.eventEnabled = true;
};

removeEvtPopupBtn.onclick = function() {
  // Chrome and Firefox: With pop-up closed, popupWin still has reference to closed pop-up window
  // IE11 and Edge: With pop-up closed, popupWin has no reference to closed pop-up window
  // As a result, the next line will error out in the latter browsers but not in the former browsers
  // In both cases, typeof popupWin evaluates to "object"
  popupWin.removeEventListener("unload", myHandler, false);
  output.innerHTML = "Pop-up Event removed";
  popupBtn.eventEnabled = false;
};

What's happening here is I open a pop-up window and add an event listener to it. I close the pop-up window and then I remove its event listener.

In Chrome and Firefox, popupWin.removeEventListener("unload", myHandler, false); proceeds as normal because even though the pop-up window is closed, popupWin still is referencing the pop-up window. With IE11 and Edge, the line throws an error because popupWin is not referencing the pop-up window.

Please understand I'm not looking for an answer of "don't do it that way, do it this way." I'm trying to understand why Chrome and Firefox still contain a reference to the pop-up window, after it has been closed, while IE11/Edge loses the reference. Which of the two cases are handling the reference to the pop-up window correctly?

Update

FYI: The above was tested in a Windows 10 VM with Microsoft Edge version 12.10240. The VM was provided by Microsoft, via their Dev Center.

https://dev.windows.com/en-us/microsoft-edge/tools/vms/windows/

As such, at least on my end, I have not confirmed that other versions of Edge, i.e. 12.x and 13.x, exhibit this issue of losing the reference.

Upvotes: 1

Views: 1825

Answers (2)

SageX
SageX

Reputation: 37

Add the 3rd param may helps.

.addEventListener("unload", myHandler, true);

It works on IE11 in my project.

e.g.

window.addEventListener('scroll', function (){ console.log(152) }, true);

Upvotes: 0

Patrick
Patrick

Reputation: 13974

As a member of the Edge team at Microsoft, this is just a bug on us. I have created an issue internally, and at some point in the (hopefully) not too distant future it will be fixed

Upvotes: 5

Related Questions