Canvas2Image在IE11中报错：Object doesn't support this action

嘿，这个问题我碰到过好多次——IE11对标准DOM事件API的支持一直有点滞后，这就是你报错的核心原因。

问题根源 #

IE11并没有实现标准的MouseEvent构造函数，所以当代码执行到这一行时：

var event = new MouseEvent('click',{"bubbles":false, "cancelable":false});

浏览器就会抛出「Object doesn't support this action」的错误。

兼容解决方案 #

把上述代码替换成IE11支持的旧版事件创建方式即可，具体代码如下：

// 兼容IE11的事件创建逻辑
var event;
if (typeof MouseEvent === 'function') {
    // 现代浏览器使用标准构造函数
    event = new MouseEvent('click', {"bubbles": false, "cancelable": false});
} else {
    // IE11使用旧API
    event = document.createEvent('MouseEvent');
    event.initMouseEvent(
        'click',
        false, // bubbles
        false, // cancelable
        window, // view
        0, // detail
        0, 0, 0, 0, // screenX, screenY, clientX, clientY
        false, false, false, false, // ctrlKey, altKey, shiftKey, metaKey
        0, // button
        null // relatedTarget
    );
}

补充说明 #

• 我们先做了特性检测，优先使用现代浏览器支持的标准写法，保证代码在Chrome、Firefox等浏览器里的表现不受影响
• 针对IE11，使用document.createEvent('MouseEvent')创建事件对象，再通过initMouseEvent方法初始化参数，其中bubbles和cancelable参数完全对应你原来的配置，其他参数保持默认值就能满足Canvas2Image的需求

替换完这段代码后，Canvas2Image在IE11里应该就能正常运行了。

内容的提问来源于stack exchange，提问作者Chetna Gupta