MouseEvent 在 Internet Explorer 中不起作用答案

【问题标题】：MouseEvent not working in Internet ExplorerMouseEvent 在 Internet Explorer 中不起作用
【发布时间】：2015-03-02 17:26:15
【问题描述】：

是我吗？是我的IE吗？或者为什么这段代码不能在 IE 11 上运行：

var clicker = new MouseEvent("click", {
  'bubbles': true,
  'cancelable': true,
  'view': window,
  'detail': 0,
  'screenX': 0,
  'screenY': 0,
  'clientX': 0,
  'clientY': 0,
  'ctrlKey': false,
  'altKey': false,
  'shiftKey': false,
  'metaKey': false,
  'button': 0,
  'relatedTarget': null
});

我在控制台 (F12) 上收到“对象不支持此操作”。我不得不想出一个解决方法，但我只是不明白为什么前面的代码不起作用（顺便说一下，前面的代码来自这里：https://msdn.microsoft.com/en-us/library/ie/dn905219(v=vs.85).aspx（创建和触发合成事件）。解决方法：

if (typeof MouseEvent !== 'function') {
    (function (){
        var _MouseEvent = window.MouseEvent;
        window.MouseEvent = function (type, dict){
            dict = dict || {};
            var event = document.createEvent('MouseEvents');
            event.initMouseEvent(
                    type,
                    (typeof dict.bubbles == 'undefined') ? true : !!dict.bubbles,
                    (typeof dict.cancelable == 'undefined') ? false : !!dict.cancelable,
                    dict.view || window,
                    dict.detail | 0,
                    dict.screenX | 0,
                    dict.screenY | 0,
                    dict.clientX | 0,
                    dict.clientY | 0,
                    !!dict.ctrlKey,
                    !!dict.altKey,
                    !!dict.shiftKey,
                    !!dict.metaKey,
                    dict.button | 0,
                    dict.relatedTarget || null
            );
            return event;
        }
    })();
}

问题是我想尽可能将已弃用的 createEvent/initXXXXEvent 迁移到新表单 (var event = new XXXXEvent(...) )，而不是依赖已弃用的方法。

【问题讨论】：

你确定只使用一个吗？在您的解决方案上？我遇到了 dict = dict | 的问题{};并将其替换为dict = dict || {}; 是否有该解决方法的来源？
已修复，感谢您指出。目标是将 dict 设置为不为空或未定义。
我一般也用||即使是数字，所以你的代码仍然有一些 |那里。不确定这是否适用于数字，但除非这是一个非常聪明的技巧，我见过的所有代码风格都使用 ||始终为此目的

标签： javascript internet-explorer

【解决方案1】：

您提供的链接中的 MSDN 文档表明 DOM L4 事件构造函数模式的新语法：

适用于 Internet Explorer for Windows 10 Technical Preview 和稍后。

这是与您使用的不同版本的 IE。所以预计IE11不支持该功能

【讨论】：

啊！我的大脑想阅读 IE 10... 与 Windows 10 的 IE 完全不同。感谢您指出问题。
这里有一个解决方法：codeproject.com/Tips/893254/…

【解决方案2】：

有一个polyfill 可以让它在 IE 中工作。

除了该代码中的try catch 块需要如下所示：

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

我将此更正提交到他们的网站。

【讨论】：

【解决方案3】：

另一个选择是使用MDN polyfills package

安装

npm i mdn-polyfills --save

用法

import 'mdn-polyfills/MouseEvent';

const link = document.createElement("a");
link.download = fileName;
link.href = url;
link.dispatchEvent(new MouseEvent("click", {bubbles: true, cancelable: true, view: window}));

【讨论】：