Chrome 中的 dispatchEvent，但 IE11 中没有

Posted 2023-03-06

【中文标题】Chrome 中的 dispatchEvent，但 IE11 中没有

【英文标题】：dispatchEvent in Chrome but not in IE11

【发布时间】：2015-01-26 10:10:21

【问题描述】：

我正在使用以下代码提交表单：

element.dispatchEvent(new Event("submit"));

Inspector 返回错误：

对象不支持此操作

这适用于 Chrome。

此命令的目的是在点击时让一个部门调用表单上的提交事件。

Jquery 不是一个选项

【问题讨论】：

IE 文档：msdn.microsoft.com/en-us/library/ie/ff975247%28v=vs.85%29.aspx

我在 Edge 中遇到了同样的问题。你找到解决办法了吗？

【参考方案1】：

考虑到未来的变化，这是使其适用于 IE11 和其他浏览器的最佳方式。

var event;
if(typeof(Event) === 'function') 
    event = new Event('submit');
else
    event = document.createEvent('Event');
    event.initEvent('submit', true, true);


$el.dispatchEvent(event);

【讨论】：

默认情况下，事件不会冒泡且不可取消 - 请参阅 developer.mozilla.org/en-US/docs/Web/API/Event/Event。要在两种情况下获得相同的行为，应该调用 initiEvent('submit', false, false)。

在 DragEvent 的情况下在 Edge 中不起作用developer.microsoft.com/en-us/microsoft-edge/platform/issues/…

很棒的跨浏览器解决方案。

【参考方案2】：

我刚刚遇到了同样的问题，但以下似乎在 IE11 中有效：

var event = document.createEvent("Event");
event.initEvent("submit", false, true); 
// args: string type, boolean bubbles, boolean cancelable
element.dispatchEvent(event);

【讨论】：

不，不要使用这个。根据developer.mozilla.org/en-US/docs/Web/API/Event/initEvent

，它已被弃用

如果您希望它在 IE 上运行，您必须使用它，请参阅 developer.mozilla.org/en-US/docs/Web/Guide/Events/… 和 msdn.microsoft.com/en-us/library/ff975247(v=vs.85).aspx 这目前可能是 MS 更新他们的软件。

是的，不幸的是，如果您希望它与 IE11 兼容，就必须使用它。

至少对于CustomEvent，一个更具前瞻性的解决方案是使用polyfill。不过，这可能不适用于 Event 构造函数。请参阅***.com/questions/26596123/…、developer.mozilla.org/en-US/docs/Web/API/CustomEvent/… 多边形填充解决了我在 IE 11 中使用 developer.mozilla.org/en-US/docs/Web/API/CustomEvent 的问题

另请注意，与 Chrome 不同，IE 不会从禁用的元素中调度。

【参考方案3】：

最好使用 polyfil 来解决这个问题。 (自定义事件填充)

# using yarn 
$ yarn add custom-event-polyfill

# using npm 
$ npm install --save custom-event-polyfill

然后在你的 javascript 中包含/要求它

import 'custom-event-polyfill';

https://www.npmjs.com/package/custom-event-polyfill

【参考方案4】：

我拼凑了各种方法的点点滴滴，然后让它发挥作用：

var customEvent = document.createEvent('htmlEvents');
customEvent.initEvent('myCustomEvent', true, true);
document.dispatchEvent(customEvent);

说实话，这对我来说没有多大意义。它在文档上创建一个事件（似乎需要将其命名为HTMLEvents），然后使用另一个名称初始化该事件。如果有人可以更好地解释这一点，请在下面添加评论，以便将其合并到答案中。

无论如何，我都可以使用标准事件侦听器在 IE11（和现代浏览器）中侦听此自定义事件：

document.addEventListener('myCustomEvent', function()
  console.log('Event received.');
);

【讨论】：

嗨 Mike，'HTMLEvents' 不是名称，它是您正在创建的自定义事件的 类别。而且“HTMLEvents”甚至似乎都不是有效值，这进一步使事情变得奇怪。 ;-) 您创建的实际事件称为myCustomEvent（也可以是change、click 或其他事件），并且您将其存储在变量customEvent 中。 （我同意，这是一个非常奇怪的界面。）更多信息在这里：msdn.microsoft.com/en-us/windows/ff975304(v=vs.71)

迟到的答案，但 'HTMLEvents' 这是一个 有效 值 Eric，您可以在共享的同一个链接上阅读它，它指定 'HTMLEvents' 确实是一种类型的事件。您可以在此处进一步了解它：dom.spec.whatwg.org/#dom-document-createevent 我拥有的代码与第一个代码完全相同，只是类型只是“事件”。这适用于 Chrome 和 Firefox，但不适用于 Edge。有了“HTMLEvents”，我也让它与 Edge 一起工作！感谢迈克的提示:)