如何宣传活动？InvalidStateError:无法在'EventTarget'上执行'dispatchEvent':事件已被调度

Question

我正在尝试将一个事件从我传播window.document到本文档中的iframe.

在window.document我捕捉事件时,我尝试以下方法:

event.preventDefault()
(@dispatchTo()).dispatchEvent(event)
# @dispatchTo() returns the reference of `document.querySelector('iframe').contentDocument`

但我明白了 InvalidStateError: Failed to execute 'dispatchEvent' on 'EventTarget': The event is already being dispatched.

我尝试了preventDefault,stopPropagation但没有人会工作.当我尝试将它发送到iframe文档并且失败时,似乎正在调度该事件.

如何在从iframe中捕获事件时将事件传播到我的iframe window.document？

我在该事件的iframe上有另一个eventListener,但它没有被触发.

我使用React(它有一个虚拟DOM,它可能会干扰,它可能不会,只是说).

---

我在那里找到了解决方案:https://stackoverflow.com/a/20541207/2391795

现在我可以使用以下代码将事件从文档分发到iframe:

eventClone = new event.constructor(event.type, event)
(@dispatchTo()).dispatchEvent(eventClone)

但由于我正在使用React,因此克隆事件不等于初始事件,因为React有一种事件包装器.所以我失去许多特性,如which和isTrusted,成为false一次克隆.

有没有办法正确克隆React事件？

Answer 1

当您尝试复制事件时，某些事件属性值会消失。这是因为许多事件属性都将其可枚举属性设置为 false：

Object.defineProperty(event, "target", {
    enumerable: false,
    writable: true,
});

这可以防止在克隆事件时复制属性的值。如果您尝试过Object.keys(evt)，则返回的唯一键是isTrusted.

某些属性（例如 target 和 path）仅在调度事件后设置，您无法手动分配它们。因此，如果您尝试调度一个已经有目标的事件，您将遇到错误InvalidStateError: Failed to execute 'dispatchEvent' on 'EventTarget': The event is already being dispatched。

这就是您遇到此错误的原因。您试图调度一个已经被调度的事件，而不是调度一个新的事件。

所以当你创建你的事件时，你应该只复制你关心的属性：

 eventClone = new event.constructor(event.type, propertiesICareAbout) 

哪里propertiesICareAbout是一个包含您关心的事件部分的对象，例如propertiesICareAbout = {shiftKey: event.shiftKey}

isTrusted是具有特定用途的属性——false如果脚本与事件交互则返回。该属性设置false为正是出于这个原因。您正在使用脚本与事件交互并通过脚本调度它。https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted

该which属性已被弃用并且正在被删除，因此无论如何您都不应该使用它。

React 事件可能与您的问题无关。出于性能原因，React 合成事件在顶层被委托和汇集。如果您手动调度事件，则应使用本机浏览器方法dispatchEvent。