I'm getting this error message only in IE8, and I don't know how to convert the existing function for IE8 patibility.

_initEvents : function() {
     var self = this;

     Array.prototype.slice.call(this.menuItems).forEach(function(el, i) {
         var trigger = el.querySelector('a');

         if (self.touch) {
             trigger.addEventListener('touchstart', function(ev) {
                   self._openMenu(this, ev); 
               });
         }
         else {
             trigger.addEventListener('click', function(ev) {
                   self._openMenu(this, ev);
               });  
        }
     });
   window.addEventListener('resize', function(ev) {
         self._resizeHandler();
     });

},

the above is just a part of it, I dont think the rest is needed. The error happens here:

 Array.prototype.slice.call( this.menuItems )

I'm getting this error message only in IE8, and I don't know how to convert the existing function for IE8 patibility.

_initEvents : function() {
     var self = this;

     Array.prototype.slice.call(this.menuItems).forEach(function(el, i) {
         var trigger = el.querySelector('a');

         if (self.touch) {
             trigger.addEventListener('touchstart', function(ev) {
                   self._openMenu(this, ev); 
               });
         }
         else {
             trigger.addEventListener('click', function(ev) {
                   self._openMenu(this, ev);
               });  
        }
     });
   window.addEventListener('resize', function(ev) {
         self._resizeHandler();
     });

},

the above is just a part of it, I dont think the rest is needed. The error happens here:

 Array.prototype.slice.call( this.menuItems )

• javascript
• object
• internet-explorer-8

Share Improve this question Follow edited Jul 1, 2013 at 1:12 Francesco Belladonna 11.7k1414 gold badges8383 silver badges151151 bronze badges asked Jul 1, 2013 at 1:04 MikeMike 17155 silver badges1010 bronze badges 11

• 3 forEach is not supported in IE8. – elclanrs Commented Jul 1, 2013 at 1:05
• 3 @elclanrs—I may be wrong, but I suspect it doesn't get that far. The error is consistent with menuItems being a DOM object, not a native object. Host objects can't be treated like native objects in IE. – RobG Commented Jul 1, 2013 at 1:15
• What is menuItems? Is it a DOM object? – RobG Commented Jul 1, 2013 at 1:16
• @RobG: I immediately thought the same. If it's a NodeList, for instance, slice() won't convert it to an array in IE <= 8. – Andy E Commented Jul 1, 2013 at 1:22
• 6 There's no reason to do the slice. Since you seem to have .forEach() shimmed, you can just do Array.prototype.forEach.call(this.menuItems, func...). This will avoid the IE8 issue of setting the this value of a native method to a non-native object. – user2437417 Commented Jul 1, 2013 at 1:23

 |  Show 6 more ments

1 Answer 1

Sorted by: Reset to default 5

When you call:

this.menuItems = this.el.querySelectorAll( '.cbp-hsmenu > li' );

the object assigned to menuItems is a static NodeList, which is a host object. Then when you do:

Array.prototype.slice.call( this.menuItems )

you are calling a built–in method with a host object as this. In IE 8 and lower (and probably lots of other older browsers), you can't do that (there is no specification that says you should, though modern browsers let you).

The simple solution is to convert menuItems to an array using some other method than call, or to add a shim for Array.prototype.forEach and use CrazyTrain's suggestion:

Array.prototype.forEach.call(this.menuItems, func...)

because in browsers without a built–in forEach, it will be a native method and work just fine. But for robust code, replace all that with a simple for loop.