wake-up-neo.com

Der Ereigniskonstruktor von Internet Explorer 9, 10 und 11 funktioniert nicht

Ich erstelle ein Ereignis. Verwenden Sie dazu den DOM-Ereigniskonstruktor:

new Event('change');

Dies funktioniert in modernen Browsern einwandfrei, schlägt jedoch in Internet Explorer 9, 10 und 11 fehl mit:

Object doesn't support this action

Wie kann ich den Internet Explorer reparieren (idealerweise über eine Polyfüllung)? Wenn ich nicht kann, gibt es eine Problemumgehung, die ich verwenden kann?

internet-explorer-9internet-explorer-10internet-explorer-11dom-eventscustom-events
110
mikemaccana

Es gibt eine IE-Polyfüllung für den CustomEvent-Konstruktor bei MDN . Das Hinzufügen von CustomEvent zu IE und das Verwenden von diesem funktioniert stattdessen.

(function () {
  if ( typeof window.CustomEvent === "function" ) return false; //If not IE

  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;
})();
156
mikemaccana

Ich denke, die beste Lösung, um Ihr Problem zu lösen und die browserübergreifende Ereigniserstellung zu bewältigen, ist:

function createNewEvent(eventName) {
    var event;
    if (typeof(Event) === 'function') {
        event = new Event(eventName);
    } else {
        event = document.createEvent('Event');
        event.initEvent(eventName, true, true);
    }
    return event;
}
44
michalduda

Dieses Paket macht die Magie:

https://www.npmjs.com/package/custom-event-polyfill

Packen Sie das Paket ein und versenden Sie das Event wie folgt:

window.dispatchEvent(new window.CustomEvent('some-event'))
4
fsavina

Wenn Sie nur versuchen, ein einfaches Ereignis wie das HTML-Umschaltereignis auszulösen, funktioniert dies in Internet Explorer 11 sowie in den anderen Browsern:

let toggle_event = null;
try {
    toggle_event = new Event("toggle");
}
catch (error) {
    toggle_event = document.createEvent("Event");
    let doesnt_bubble = false;
    let isnt_cancelable = false;
    toggle_event.initEvent("toggle", doesnt_bubble, isnt_cancelable);
}
// disclosure_control is a details element.
disclosure_control.dispatchEvent(toggle_event);
2
Patrick Dark

das custom-event npm package hat bei mir wunderbar funktioniert

https://www.npmjs.com/package/custom-event

var CustomEvent = require('custom-event');

// add an appropriate event listener
target.addEventListener('cat', function(e) { process(e.detail) });

// create and dispatch the event
var event = new CustomEvent('cat', {
  detail: {
    hazcheeseburger: true
  }
});
target.dispatchEvent(event);
2
Liran H

Ich persönlich verwende eine Wrapper-Funktion, um manuell erstellte Ereignisse zu verarbeiten. Der folgende Code fügt eine statische Methode für alle Event Schnittstellen hinzu (alle globalen Variablen, die auf Event enden, sind eine Ereignisschnittstelle) und ermöglicht es Ihnen, Funktionen wie element.dispatchEvent(MouseEvent.create('click')); in IE9 + aufzurufen .

(function eventCreatorWrapper(eventClassNames){
    eventClassNames.forEach(function(eventClassName){
        window[eventClassName].createEvent = function(type,bubbles,cancelable){
            var evt
            try{
                evt = new window[eventClassName](type,{
                    bubbles: bubbles,
                    cancelable: cancelable
                });
            } catch (e){
                evt = document.createEvent(eventClassName);
                evt.initEvent(type,bubbles,cancelable);
            } finally {
                return evt;
            }
        }
    });
}(function(root){
    return Object.getOwnPropertyNames(root).filter(function(propertyName){
        return /Event$/.test(propertyName)
    });
}(window)));

EDIT: Die Funktion zum Auffinden aller Event Schnittstellen kann auch durch ein Array ersetzt werden, um nur die von Ihnen benötigten Event-Schnittstellen zu ändern (['Event', 'MouseEvent', 'KeyboardEvent', 'UIEvent' /*, etc... */]).

1
Kevin Drost

Es gibt einen Polyfill-Service, der dieses und andere für Sie patchen kann

https://polyfill.io/v3/url-builder/

 <script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js"></script>
1
frumbert