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)); ```