事件处理程序在 IE11 或 Chrome 中工作，但不能同时在两者中工作答案

【问题标题】：Event handlers work in IE11 or Chrome, but not both事件处理程序在 IE11 或 Chrome 中工作，但不能同时在两者中工作
【发布时间】：2017-01-07 03:29:04
【问题描述】：

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

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（如图所示隐含使用），但是还有什么阻止了这个函数跨浏览器？

【问题讨论】：

你肯定需要.call 方法，那么在 Chrome 中失败的原因是什么？
由于第二个版本应该可以工作，问题可能出在代码的其他地方。所以你需要展示更多的代码。

标签： javascript google-chrome ecmascript-6 internet-explorer-11

【解决方案1】：

您的第二个代码 sn-p 应该没问题。这是一个工作示例（我在 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 妨碍了您，或者还有其他未显示的因素在起作用？

【讨论】：

我无法粘贴专有代码，因此我会接受并继续使用该信息。谢谢！