事件处理程序适用于 IE11 或 Chrome，但不能同时适用于两者

Question

在我帮助维护的代码库中，存在这种形式的函数（为简洁起见被删除）：

function setListeners(enable) {
    const fn = enable ? document.body.addEventListener : document.body.removeEventListener;

    fn('click', foo);
    fn('MyCustomEvent', bar);
}

IE11 抛出 Illegal Invocation，而其他浏览器工作正常。另一位维护者将功能切换为这种形式：

function setListeners(enable) {
    const fn = enable ? document.body.addEventListener : document.body.removeEventListener;

    fn.call(document.body, 'click', foo);
    fn.call(document.body, 'MyCustomEvent', bar);
}

现在可以在 IE11 中使用，但不能 Chrome。我们已经有一个 CustomEvent 的 polyfill（如图所示，它有一个隐含的用途），但是还有什么阻止这个函数保持跨浏览器？

Answer 1

你的第二个代码片段应该没问题。这是一个工作示例（对我来说在 Chrome 中成功测试）：

const fn = document.body.addEventListener;

fn.call(document.body, 'MyCustomEvent', e => {
  console.log('MyCustomEvent', e.detail);
});

document.body.dispatchEvent(new CustomEvent('MyCustomEvent', {
  detail: 'it worked!'
}));

也许您的 CustomEvent polyfill 妨碍了您的工作，或者还有其他未显示的因素在起作用？

事件处理程序适用于 IE11 或 Chrome，但不能同时适用于两者

Event handlers work in IE11 or Chrome, but not both

javascript

google-chrome

ecmascript-6

internet-explorer-11