Internet Explorer 9, 10 и 11 Конструктор событий не работает
Я создаю событие, поэтому используйте конструктор события DOM:
new Event('change'); Это прекрасно работает в современных браузерах, однако в Internet Explorer 9, 10 и 11 он терпит неудачу:
Object doesn't support this action
Как я могу исправить Internet Explorer (в идеале через polyfill)? Если я не могу, есть ли обходной путь, который я могу использовать?
- Как заблокировать рекламу в Internet Explorer?
- локальное хранилище в IE9 сбой при доступе к веб-сайту непосредственно из файловой системы
- CORS с jQuery и XDomainRequest в IE8 / 9
- CSS3 transform: rotate; в IE9
- Сколько времени URL-адрес может получить Internet Explorer 9?
- HTML5 - видеоролик mp4 не воспроизводится в IE9
- Открытие * .svg с IE9 вызывает диалог «Открыть, Сохранить как»
- Градиентное отклонение IE9 и фоновое gradleиентное кровотечение
- У IE автономный браузер все еще существует (и работает на Win 7?)
- Internet Explorer 9 Drag and Drop (DnD)
- IE9 JSON Data "вы хотите открыть или сохранить этот файл"
- IE9 jQuery AJAX с CORS возвращает «Доступ запрещен»
- Как отключить горячие клавиши в Internet Explorer 9?
В MDN есть конструктор IE для конструктора CustomEvent . Добавление CustomEvent в IE и использование этого вместо этого работает.
(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; })();
Я думаю, что наилучшим решением для решения вашей проблемы и создания кросс-браузерных событий является:
function createNewEvent(eventName) { if(typeof(Event) === 'function') { var event = new Event(eventName); }else{ var event = document.createEvent('Event'); event.initEvent(eventName, true, true); } }
Этот пакет делает магию:
https://www.npmjs.com/package/custom-event-polyfill
Включите пакет и отправьте событие следующим образом:
window.dispatchEvent(new window.CustomEvent('some-event'))
Если вы просто пытаетесь отправить простое событие, такое как событие переключения HTML, это работает в Internet Explorer 11, а также в других браузерах:
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);
Я лично использую функцию обертки для обработки созданных вручную событий. Следующий код добавит статический метод для всех интерфейсов Event (все глобальные переменные, заканчивающиеся на Event являются интерфейсом Event) и позволяют вам вызывать функции, такие как element.dispatchEvent(MouseEvent.create('click')); на IE9 +.
(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: функция поиска всех интерфейсов Event также может быть заменена массивом для изменения только необходимых интерфейсов событий ( ['Event', 'MouseEvent', 'KeyboardEvent', 'UIEvent' /*, etc... */] ).
пакет npm для custom-event отлично работал для меня
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);