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').forEach(function(item){
  item.addEventListener('mousedown', function(e) { console.log( "User clicked on 'foo.'" ); 
  e.preventDefault();}); 
})

This works on chrome, but not on IE 11.

I tried the following code as well.

document.getElementsByClassName('select2-result-selectable').forEach(function(item){
    if (item.addEventListener){
        item.addEventListener('mousedown',function(e){ console.log(e); e.preventDefault(); 
        console.log( "User clicked on 'foo.'" );}) 
      } else if (item.attachEvent){
        item.attachEvent('mousedown',function(e){ console.log(e); e.preventDefault(); 
        console.log( "User clicked on 'foo.'" );})
      }
    })

But this was again futile, it works for chrome, but not on IE. Any suggestions?

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').forEach(function(item){
  item.addEventListener('mousedown', function(e) { console.log( "User clicked on 'foo.'" ); 
  e.preventDefault();}); 
})

This works on chrome, but not on IE 11.

I tried the following code as well.

document.getElementsByClassName('select2-result-selectable').forEach(function(item){
    if (item.addEventListener){
        item.addEventListener('mousedown',function(e){ console.log(e); e.preventDefault(); 
        console.log( "User clicked on 'foo.'" );}) 
      } else if (item.attachEvent){
        item.attachEvent('mousedown',function(e){ console.log(e); e.preventDefault(); 
        console.log( "User clicked on 'foo.'" );})
      }
    })

But this was again futile, it works for chrome, but not on IE. Any suggestions?

• javascript
• jquery
• internet-explorer
• backbone.js

Share Improve this question Follow asked Nov 28, 2019 at 11:44 Mahesh MestaMahesh Mesta 78311 gold badge1414 silver badges3131 bronze badges 2

• 1 When running into trouble with code in IE11, always be sure to use F12 to open the dev tools so you can see what specific errors it's giving you. In this case, for instance, I suspect the error isn't about addEventListener at all, but rather forEach on HTMLCollection. – T.J. Crowder Commented Nov 28, 2019 at 11:53
• 1 I'm in favor of T.J. Crowder's opinion. How does it not work for IE? What is the specific error showing in console in IE? I run your code in IE and Chrome, neither works. Have you tried the solution in T.J. Crowder's answer? I test it and it works well in both IE and Chrome. – Yu Zhou Commented Nov 29, 2019 at 5:29

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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):

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

...and turning off "patibility 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 getElementsByClassName isn'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 = [typeof NodeList !== "undefined" && NodeList, typeof HTMLCollection !== "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 (typeof Symbol !== "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.

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

you can have a utility like below

 function addHandler (element, type, handler) {
  if (element.addEventListener) {
    element.addEventListener(type, handler, false);
  } else if (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() {....} )