Clone a DOM event object to re-dispatch

2020-07-05 07:41发布


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 the existing event object.

Is there a generic and reusable solution that will work with any event type, or failing that, a way to do this for a specific event type (in my case I'm currently concerned with the mousewheel event)?


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);

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

jsfiddle example


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 );


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.