IE11中CustomEvent Polyfill在PDF下载后停止触发事件问题

AI 小北

2026-5-19

解决IE11下载PDF后CustomEvent失效的问题

我之前在项目里也碰到过一模一样的情况——用了MDN的CustomEvent polyfill后，在Win7的IE11里下载PDF，后续自定义的change事件就完全不触发了，但原生事件还正常。折腾了一阵后，找到了两个靠谱的解决办法：

方案一：替换为更稳定的CustomEvent Polyfill

MDN提供的polyfill在某些特殊场景下（比如浏览器处理文件下载后的状态变更）会出现事件监听丢失的问题。试试下面这个兼容IE11的polyfill，它更贴合IE11的事件模型：

(function () {
  if (typeof window.CustomEvent === "function") return false;

  function CustomEvent(event, params) {
    params = params || { bubbles: false, cancelable: false, detail: null };
    var evt = document.createEvent('CustomEvent');
    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
    return evt;
  }

  CustomEvent.prototype = window.Event.prototype;
  window.CustomEvent = CustomEvent;
})();

这个polyfill直接使用IE11支持的document.createEvent和initCustomEvent方法，避免了原生构造函数模拟可能带来的兼容性问题，在文件下载后的场景下也能稳定运行。

方案二：手动触发事件时改用IE兼容的写法

如果不想替换整个polyfill，也可以在触发CustomEvent的时候，针对IE11做单独处理：

// 触发自定义change事件的函数
function triggerCustomChange(element, detail) {
  if (window.navigator.userAgent.indexOf('Trident/7.0') > -1) { // 检测IE11
    var evt = document.createEvent('CustomEvent');
    evt.initCustomEvent('change', true, true, detail);
    element.dispatchEvent(evt);
  } else {
    element.dispatchEvent(new CustomEvent('change', {
      bubbles: true,
      cancelable: true,
      detail: detail
    }));
  }
}

这样在IE11里直接用原生的事件创建方法触发，绕过polyfill可能存在的bug。