Clone a DOM event object to re-dispatch

Question

Some browsers won\'t allow you to re-dispatch an event that has already been dispatched, but allow you to create new event objects based on values that can be obtained from

Answer 1

I found my own answer, at least for MouseEvents specifically:

function cloneMouseEvent( e ) {
    var evt = document.createEvent( "MouseEvent" );
    evt.initMouseEvent( e.type, e.canBubble, e.cancelable, e.view, e.detail, e.screenX, e.screenY, e.clientX, e.clientY, e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, e.button, e.relatedTarget );
    return evt;
}

You can then dispatch the event on a target with:

target.dispatchEvent( evt );

Answer 2

You may want to use the (poorly documented) NWEvents library

NW.Event.dispatch(target, e.type, false, e);

Works with any event, and in older IEs too.

Answer 3

It seems there is now an even better solution, since initMouseEvent and the like are deprecated. The MouseEvent() constructor, for example, takes a table of properties as its second parameter, for which you can use an existing MouseEvent object:

let my_event = new MouseEvent(`foo`, some_existing_mouse_event);
dispatchEvent(my_event);

Other classes of events have similar constructors that should be usable in the same way. Such as ClipboardEvent().

jsfiddle example