Clone a DOM event object to re-dispatch

问题

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

回答1:

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

回答2:

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

回答3:

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.

来源：https://stackoverflow.com/questions/12752818/clone-a-dom-event-object-to-re-dispatch

标签

javascript

dom

dom-events