Object doesn't support this action IE9 with CustomEvent Initialization

Question

I am getting the following error in IE9:

"Object doesn't support this action".

There are various question about this, but mine is specifically for the following code:

 var myEvent = new CustomEvent("additem");

From my understanding, CustomEvent is supported in IE9 as a DOM manipulation command. This works fine in Chrome without any exception.

Anyone has this problem and know how to solve it? Thanks.

Solution 1

Afaik custom events are not supported in IE, only in normal browsers. I suggest using a javascript library that provides a browser independent implementation like Jquery's trigger: http://api.jquery.com/trigger/

Solution 2

You can use a javascript function to detect if the browser is IE11 or lower then apply the next polyfill:

    (function () {
      function CustomEvent ( event, params ) {
        params = params || { bubbles: false, cancelable: false, detail: undefined };
        var evt = document.createEvent( 'CustomEvent' );
        evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
        return evt;
      };

      CustomEvent.prototype = window.Event.prototype;
      window.CustomEvent = CustomEvent;
    })();

The polyfill from above is taken from MDN: https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent

Solution 3

Try this polyfill which doesn't replace a native (and functional) CustomEvent method.

(function () {
  try {
    new CustomEvent('test');
    return;
  } catch(e) {
    // ignore this error and continue below
  }

  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
  };

  CustomEvent.prototype = window.Event.prototype;
  window.CustomEvent = CustomEvent;
})();

Solution 4

The following polyfill would not replacce native CustomEvent(),
Partial source from: MDN CustomEvent():

(function () {

  if (typeof CustomEvent === 'function') { return; }

  function customEvent(event, params) {

      params = params || {bubbles: false, cancelable: false, detail: undefined};

      var evt = document.createEvent('CustomEvent');

      evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);

      return evt;
  }

  customEvent.prototype = window.Event.prototype;
  window.CustomEvent = customEvent;
})();

View more solutions

Comments

[HMR]

Looks like IE9 has now constructor for customEvent msdn.microsoft.com/en-us/library/ie/ff975304%28v=vs.85%29.as‌​px see an example using createEvent function but no constructor. I agree with Flunk to better use a library if you want multi browser support.

[ComFreek]

@HMR is right, custom events are supported!. You have to use document.createEvent() and CustomEvent::initCustomEvent() for IE 9 comptability. See my answer here: stackoverflow.com/a/19345563/603003

[goofballLogic]

this polyfill doesn't seem to detect when to degrade from the native implementations

[Florin Dobre]

Thank you, Alin! I edited my answer and corrected it.

[olefrank]

The URL should be: developer.mozilla.org/en-US/docs/Web/API/CustomEvent/…

[anztenney]

This didn't work for me in IE11. Invoking new CustomEvent('test') actually called the method defined here, causing the polyfill to never be added.

[Scott Jungwirth]

Ah interesting.., maybe try moving the rest inside the catch block?