javascript - 如何传播事件？无效状态错误 : Failed to execute 'dispatchEvent' on 'EventTarget' : The event is already being dispatched

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 文档时似乎正在发送事件，但失败了。

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

我在该事件的 iframe 上确实有另一个 eventListener，但它没有被触发。

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

---

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

现在我可以使用以下代码将事件从文档分派(dispatch)到 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)，返回的唯一 key 是 isTrusted。

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

这就是您遇到此错误的原因。您试图分派(dispatch)一个已经分派(dispatch)的事件，而不是分派(dispatch)一个新事件。

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

 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 合成事件在顶层被委托(delegate)和汇集。如果您手动调度事件，则应使用 native 浏览器方法 dispatchEvent。