I am trying to propagate an event from my window.document to an iframe in this document.
When catching an event in window.document I try the following:
event.preventDefault() (@dispatchTo()).dispatchEvent(event) # @dispatchTo() returns the reference of `document.querySelector('iframe').contentDocument`
But I get InvalidStateError: Failed to execute 'dispatchEvent' on 'EventTarget': The event is already being dispatched.
I tried preventDefault and stopPropagation , but no one worked. It seems that the event is dispatched when I try to send it to an iframe document, and it fails.
How can I distribute an event in my iframe when it was catching it from window.document ?
I have another eventListener for an iframe for this event, but it does not fire.
I am using React (which has a virtual DOM, it may interfere, it may not say).
I found there a part of the solution: https://stackoverflow.com/a/167189/
And now I can send events from the document to the iframe using this code:
eventClone = new event.constructor(event.type, event) (@dispatchTo()).dispatchEvent(eventClone)
But since I use React, the cloned event is not equal to the starting event, because React has a kind of wrapper for events. Therefore, I lose many properties, such as which and isTrusted , which become false after cloning.
Is there a way to properly clone a React event?