Internet Explorer 11 Issues: Addeventlistener Not Working

I am trying to add listener event for mouse down on a list of elements. The code works for chrome, but not for IE document.getElementsByClassName('select2-result-selectable').forEa

Solution 1:

I suspect you'll find that it's not addEventListener that's the problem, although your second code block would have needed onmousedown rather than just mousedown in the attachEvent call (Microsoft used the "on" prefix on event names). But IE11 has addEventListener anyway, it would only be missing if IE11 were hobbling itself (which you can fix by adding the X-UA-Compatible header to your page in head):

<metahttp-equiv="X-UA-Compatible"content="IE=edge">

...and turning off "compatibility view" for Intranet sites if necessary.

But, I think the problem is that you're trying to use forEach on an HTMLCollection. The return value of getElementsByClassNameisn't an array, it's an HTMLCollection. The spec doesn't require HTMLCollection to have forEach (Chrome adds it as an extension). forEach is defined for NodeList (the type returned by querySelectorAll), but not HTMLCollection, and that addition is relatively new and not supported in IE.

So to use forEach, you'd do:

Array.prototype.forEach.call(document.getElementsByClassName('select2-result-selectable', function(item) {
    // ...
});

Alternatively, you can polyfill forEach on HTMLCollection easily, though, as shown in my answer here. Here's a loop doing both NodeList (if necessary) and HTMLCollection (if necessary), and polyfilling forEach (if necessary) and (for browsers that have it) Symbol.iterator (IE11 doesn't, though, you may choose to leave that code off although it's harmless to leave it):

var ctors = [typeofNodeList !== "undefined" && NodeList, typeofHTMLCollection !== "undefined" && HTMLCollection];
for (var n = 0; n < ctors.length; ++n) {
    var ctor = ctors[n];
    if (ctor && ctor.prototype && !ctor.prototype.forEach) {
        // (Yes, there's really no need for `Object.defineProperty` when doing the `forEach`)
        ctor.prototype.forEach = Array.prototype.forEach;
        if (typeofSymbol !== "undefined" && Symbol.iterator && !ctor.prototype[Symbol.iterator]) {
            Object.defineProperty(ctor.prototype, Symbol.iterator, {
                value: Array.prototype[Symbol.itereator],
                writable: true,
                configurable: true
            });
        }
    }
}

Then your original code using forEach on HTMLCollection would work.

Solution 2:

Your problem is using .foreach. It isn't supported in IE11

Change it for a regular for loop.

var myclasses = document.getElementsByClassName('select2-result-selectable')

for (var i = 0; i < myclasses.length; i++) {
   array[i].addEventListener('mousedown', function(e) { console.log( "User clicked on 'foo.'"); 
}

Or you can use other language processors like babel to fix it and build your sites, depending on what your stack looks like.

This is untested as I don't have access to ie11 at the moment

Solution 3:

you can have a utility like below

function addHandler (element, type, handler) {
  if (element.addEventListener) {
    element.addEventListener(type, handler, false);
  } elseif (element.attachEvent) {
    element.attachEvent("on" + type, handler);
  } else {
    element["on" + type] = handler;
  }
 }

that can work on all browsers, In this case you should use like

addHandler(item, "mousedown", function() {....} )