Internet Explorer 9,10 & 11事件构造函数不工作

我正在创建一个事件，所以使用 DOM Event 构造函数:

new Event('change');

这种方法在现代浏览器中运行良好，但在 Internet Explorer 910和11中就失败了:

Object doesn't support this action

如何修复 Internet Explorer (最好是填充材料) ？

72764 次浏览
小开
最佳答案

有一个 MDN 的 CustomEvent 构造函数的 IE 填充.AddingCustomEvent 到 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;
})();
小开

如果你只是想发送一个简单的事件，比如 HTML toggle 事件，这个 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);
小开

我认为解决问题和处理跨浏览器事件创建的最佳方法是:

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;
}
小开

这个套餐具有神奇的效果:

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

包括包裹并按以下方式发送事件:

window.dispatchEvent(new window.CustomEvent('some-event'))
小开

我个人使用包装函式来处理手动创建的事件。下面的代码将在所有 Event接口上添加一个静态方法(以 Event结尾的所有全局变量都是 Event 接口) ，并允许您在 IE9 + 上调用类似 element.dispatchEvent(MouseEvent.create('click'));的函数。

(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)));

编辑: 查找所有 Event接口的函数也可以被一个数组替换，只改变您需要的 Event 接口(['Event', 'MouseEvent', 'KeyboardEvent', 'UIEvent' /*, etc... */])。

小开

custom-event npm 软件包对我来说非常好用

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);
小开

有一个填充服务，可以为您修补这个和其他

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

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

提交答案