明明有Polyfill，不起作用？IE11 el-menu鼠标滑过报错Error in v-on handlerTypeError对象不支持此操作...

---

theme: channing-cyan

highlight: a11y-dark

明明有Polyfill，不起作用？IE11 el-menu鼠标滑过报错Error in v-on handlerTypeError对象不支持此操作

一、现象描述

NavMenu 在折叠之后,鼠标滑过(含悬浮)menu菜单,在其他浏览器没有错误,但是在IE11下,报错 Error in v-on handler: "TypeError: 对象不支持此操作"

二、原因分析

原因在于element-ui的submenu代码中多处使用了new MouseEvent('*')，但是ie中不支持该种操作。因此我们需要使用polyfill，触发polyfill对该api的支持就可以了。修改源码是可以的，但我更建议单独写一个文件，在main.js中引入触发polyfill的支持。(这里解释下，babel默认支持的是普通语法转换，新增的api通常由polyfill支持转换。)

源码位置：node_modules\element-ui\lib\element-ui.common.js

三、拓展：简单认识下Babel和Polyfill

前文提到，这个bug的解决思路是引入触发polyfill进行语法(api)的转换到低版本，从而增强兼容性。那么为什么不是Babel而是polyfill呢？Babel的早期名字是“es6to5”,非常见名的知意，直接表达了其作用，就是将es6的语法转换为es5的语法。然而随着es的升级和改名，这个名字显然不合适了，以为除了es6语法转为es5，更高版本的语法显然也需要向下兼容，此后才有了Babel这个新名字。而默认的Babel只是做语法(syntax)的转换，对于新的API的转换支持工作则交给了polyfill。

顺带一提：

1.polyfill也可以说是Babel的一部分一个包。

2.你的vue项目默认的Babel和polyfill套餐，一般不会对node_modules中的依赖主动转换，这也是本文提到的bug被我这样的许多人遇到的主要原因之一。

四、解决方案

// 创建js文件并在引入 element之前，引入该修复文件 // 如下 element-ui-fix-17404.js

```js // 修复element-ui NavMenu 在折叠之后,鼠标滑过menu,在其他浏览器没有错误, // 但是在IE下,报错.Error in v-on handler: "TypeError: 对象不支持此操作 /* eslint-disable */ (function(window) { try { new MouseEvent('fix'); return false; // No need to polyfill } catch (e) { console.error(e) } // Polyfills DOM4 MouseEvent var MouseEvent = function(eventType, params) { params = params || { bubbles: false, cancelable: false }; var mouseEvent = document.createEvent('MouseEvent'); mouseEvent.initMouseEvent(eventType, params.bubbles, params.cancelable, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); return mouseEvent; };

MouseEvent.prototype = Event.prototype;

window.MouseEvent = MouseEvent;

}(window)); ```