web-dev-qa-db-fra.com

dispatchEvent ne fonctionne pas dans IE11

J'utilise le code suivant pour soumettre un formulaire:

element.dispatchEvent(new Event("submit"));

L'inspecteur renvoie l'erreur: L'objet ne prend pas en charge cette action.

Cela fonctionne dans Chrome.

L'objectif de cette commande est de faire en sorte qu'une division appelle l'événement submit d'un formulaire lorsque l'utilisateur clique dessus.

Jquery n'est pas une option

javascriptjavascript-eventsinternet-explorer-11dispatchevent
36
user4014674

C'est le meilleur moyen de le faire fonctionner pour IE11 et les autres navigateurs en tenant compte des modifications futures.

var event;
if(typeof(Event) === 'function') {
    event = new Event('submit');
}else{
    event = document.createEvent('Event');
    event.initEvent('submit', true, true);
}

$el.dispatchEvent(event);
47
Kohei Mikami

Je viens d'avoir le même problème, mais ce qui suit semble fonctionner dans IE11:

var event = document.createEvent("Event");
event.initEvent("submit", false, true); 
// args: string type, boolean bubbles, boolean cancelable
element.dispatchEvent(event);
38
Taimo Kolsar

J'ai assemblé des morceaux d'approches différentes et je l'ai fait fonctionner:

var customEvent = document.createEvent('HTMLEvents');
customEvent.initEvent('myCustomEvent', true, true);
document.dispatchEvent(customEvent);

Pour être honnête, cela n’a pas beaucoup de sens pour moi. Il crée un événement (le nommer HTMLEvents semble être requis) sur le document, puis initialise et initialise cet événement avec un autre nom. Si quelqu'un peut mieux l'expliquer, veuillez ajouter un commentaire ci-dessous pour qu'il puisse être intégré à la réponse.

Dans tous les cas, je peux écouter cet événement personnalisé dans IE11 (et les navigateurs modernes) avec un écouteur d'événement standard:

document.addEventListener('myCustomEvent', function(){
  console.log('Event received.');
});
0
Mike Wheaton

Il est préférable d'utiliser un polyfil pour résoudre ce problème. (custom-event-polyfill)

# using yarn 
$ yarn add custom-event-polyfill

# using npm 
$ npm install --save custom-event-polyfill

puis l'inclure/l'exiger dans votre javascript 

import 'custom-event-polyfill';

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

0
Sanath