addEventListener doesnt fire on click in IE

Question

I have the below code and the "alert" doesn't happen on click on the said element. But addEventListener seems to be supported by the IE I use (version 10) as I checked with another simple program and it worked fine.

var iframe1 = document.getElementsByName('frStatus')[0];
var innerDoc = (iframe1.contentDocument) ? iframe1.contentDocument : iframe1.contentWindow.document;
innerDoc.getElementById('slow_jquery').innerHTML = slowjquerycount;
innerDoc.getElementById('slow_jquery').style.color="red";
console.log("doc"+document.getElementById("slow_jquery"));
innerDoc.getElementById('slow_jquery').addEventListener("click", function(){
       alert("event listener");
});

The corresponding html is

<span id="slow_jquery" style="cursor:pointer;color:green;">0</span>

When the above code is executed & the element is clicked, no error is thrown, no warning on console, and the alert message is not shown. Is there anything wrong with the code ? Any help is going to be of much use.

Thanks in advance.

Note: - Already tried using z-index to ensure the element is not hidden behind another. - Code works fine in Chrome. - Ensured that IE-10 supports addEventListener.

Your understanding of events is broken. Have you tried to click on the button before posting the question? — Ismael Miguel, Sep 07 '15 at 17:20
By "executed", I meant onclick ! I know what an event listener on "click" is intended to do — Anu145, Sep 07 '15 at 17:24
Is the iframe from another site? Or is it in the same domain? — Ismael Miguel, Sep 07 '15 at 17:24
No.. It is from the same. And the code works fine on chrome.. — Anu145, Sep 07 '15 at 17:26
Are you sure that the element inside the iframe exists when the code is executed? — Ismael Miguel, Sep 07 '15 at 17:30
Yes I am sure about it.. I had the same doubt and tested by removing the element and got "cannot attach addEventListener to null" error. — Anu145, Sep 07 '15 at 17:32
That is incredibly weird. Are you sure that there isn't any transparent element over the button or over the iframe? — Ismael Miguel, Sep 07 '15 at 17:39
Yes I am absolutely sure.. I am just wondering why it works in Chrome and not in IE.. If there was another element stopping the click from hitting slow_jquery, it shudnt fire on Chrome too right! But it works der — Anu145, Sep 07 '15 at 17:41
Not exactly. It could be the result of a difference on CSS handling, since IE10 is old. And that could place something transparent above the iframe. It happened to me before. — Ismael Miguel, Sep 07 '15 at 17:44
Yes, it could. But can you add some html to the question? Also, before someone deletes the comments, you should make a list of things you've already checked. — Ismael Miguel, Sep 07 '15 at 17:46

Pavel Gatnar · Accepted Answer · 2015-09-07T18:18:10.263

2

Try element.onclick=function instead of registering 'click' event listener.

edited Sep 07 '15 at 18:18

answered Sep 07 '15 at 18:09

Pavel Gatnar

3,987
2
19
29

You mean the HTML property, the object property or the old-style event? – Ismael Miguel Sep 07 '15 at 18:10
@Anu145 you can try to add the 3rd argument with value `false` to the `addEventListener` call, by IE it is not optional – Pavel Gatnar Sep 08 '15 at 05:51

score 1 · Answer 2 · edited May 23 '17 at 11:44

You are trying to bind a listener to a dynamically added element. That's easy in jQuery with .on(). In plain JS it's a bit more difficult: you'll have to use event delegation.

Make sure the argument to querySelector is an element that exists on load, and isn't added dynamically! In this case I assume that iframe1 is such an element.

document.querySelector(iframe1).addEventListener("click", function(event) {
  if (event.target.id === "slow_jquery") {
    alert("event listener");
  }
});

Also see this answer:

CAVEATS! The example Fiddle only includes code for the standards-compliant browsers (i.e., IE9+, and pretty much every version of everyone else) If you need to support "old IE's" attachEvent, then you'll want to also provide your own custom wrapper around the proper native functions. (There are lots of good discussions out there about this; I like the solution Nicholas Zakas provides in his book Professional JavaScript for Web Developers.)

Tried all of these but didnt work.. element.onclick worked instead. Thanks — Anu145, Sep 08 '15 at 04:27

addEventListener doesnt fire on click in IE

2 Answers2