Element: [Bug Report] NavMenu 在折叠之后,鼠标滑过menu,在其他浏览器没有错误,但是在IE下,报错.Error in v-on handler: "TypeError: 对象不支持此操作"

[MacMang]

Element UI version

2.12.0

OS/Browsers version

windows/IE所有版本

Vue version

2.6.10

Reproduction Link

https://codepen.io/mengtuo/pen/zYOWReP

Steps to reproduce

将代码复制到html文件里,然后在IE里执行,在折叠的时候,会在控制台报错.
found in
---> at packages/menu/src/submenu.vue
at packages/menu/src/menu.vue

What is Expected?

虽然这个错误暂时不会影响的程序功能的实现.但是不确定未来是否会影响.所以希望帮忙解决这个问题.

What is actually happening?

已经在多个网站进行搜索,均无合适的解决方案.

[eicoder]

Element UI version

2.12.0

OS/Browsers version

windows/IE所有版本

Vue version

2.6.10

Reproduction Link

https://codepen.io/mengtuo/pen/zYOWReP

Steps to reproduce

将代码复制到html文件里,然后在IE里执行,在折叠的时候,会在控制台报错.
[Vue warn]: Error in v-on handler: "TypeError: 对象不支持此操作"
found in
---> at packages/menu/src/submenu.vue
at packages/menu/src/menu.vue

What is Expected?

虽然这个错误暂时不会影响的程序功能的实现.但是不确定未来是否会影响.所以希望帮忙解决这个问题.

What is actually happening?

已经在多个网站进行搜索,均无合适的解决方案.

/* eslint-disable */
(function(window) {
    try {
        new MouseEvent('test');
        return false; // No need to polyfill
    } catch (e) {
        // Need to polyfill - fall through
    }
    // 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));

[webliuxiang]

我也遇到了类似的问题。当鼠标滑过 el-menu 时 IE11 也会报错

[qiangbro]

同遇。
原因在于element-ui的submenu代码中多处使用了new MouseEvent('*')，但是ie中不支持该种操作

[liyoungs]

在node_modules\element-ui\lib\element-ui.common.js 加上一个如下polyfill就好了：（感谢二楼）

`(function (window) {
try {
new MouseEvent('test');
return false; // No need to polyfill
} catch (e) {
// Need to polyfill - fall through
}

// Polyfills DOM4 MouseEvent
var MouseEventPolyfill = function (eventType, params) {
    params = params || { bubbles: false, cancelable: false };
    var mouseEvent = document.createEvent('MouseEvent');
    mouseEvent.initMouseEvent(eventType, 
        params.bubbles,
        params.cancelable,
        window,
        0,
        params.screenX || 0,
        params.screenY || 0,
        params.clientX || 0,
        params.clientY || 0,
        params.ctrlKey || false,
        params.altKey || false,
        params.shiftKey || false,
        params.metaKey || false,
        params.button || 0,
        params.relatedTarget || null
    );

    return mouseEvent;
}

MouseEventPolyfill.prototype = Event.prototype;

window.MouseEvent = MouseEventPolyfill;

})(window);`

[liyoungs]

Element UI version

2.12.0

OS/Browsers version

windows/IE所有版本

Vue version

2.6.10

Reproduction Link

https://codepen.io/mengtuo/pen/zYOWReP

Steps to reproduce

将代码复制到html文件里,然后在IE里执行,在折叠的时候,会在控制台报错.
[Vue warn]: Error in v-on handler: "TypeError: 对象不支持此操作"
found in
---> at packages/menu/src/submenu.vue
at packages/menu/src/menu.vue

What is Expected?

虽然这个错误暂时不会影响的程序功能的实现.但是不确定未来是否会影响.所以希望帮忙解决这个问题.

What is actually happening?

已经在多个网站进行搜索,均无合适的解决方案.

/* eslint-disable */
(function(window) {
    try {
        new MouseEvent('test');
        return false; // No need to polyfill
    } catch (e) {
        // Need to polyfill - fall through
    }
    // 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));

赞

[iScorpius]

考虑到element-ui版本更新或者重新通过npm install安装包时，写入node_modules\element-ui\lib\element-ui.common.js里面的patch会失效。其实可以单独写入一个文件到项目目录里面，然后在webpack的打包入口文件里面，在引入element-ui之前引入。