Cloning an event object in Javascript/jQuery

Question

How can I create a completely separate and new event object that contains all of the same exact properties as a given event object e. So far I've tried the following but no luck:

function myHandler(e) {
   // ...

   e = e.originalEvent;

   // method 1
   var e2 = jQuery.extend(true, {}, e);

   // method 2
   var e2 = JSON.parse(JSON.stringify(e));

   // ...
}

EDIT: I will add more details to help clarify. Very similar to this question I am trying to do: div.dispatchEvent(e.originalEvent), but doing so results in:

DISPATCH_REQUEST_ERR: DISPATCH_REQUEST_ERR: DOM Events Exception 1

so in order to avoid this, I need to duplicate the event object. However, this event object isn't a specific one (i.e., sometimes the e is a touchstart, touchmove, or touchend) and therefore it'd be easier if I could get a general cloning function instead of just hard coding the specific properties. What I meant by "no luck" was that by trying the aforementioned methods and sending that thru the dispatch function I was getting errors. Hope this helps clarify a bit.

How about `jQuery.extend(true, {}, e)` without the `e = e.originalEvent` ? And what do you mean by "no luck" ? :) — Michał Miszczyszyn, Sep 24 '12 at 20:35
"DISPATCH_REQUEST_ERR: If the Event object is already dispatched in the tree." hmm... — Michał Miszczyszyn, Sep 25 '12 at 06:14
Like I said, I'm trying to pass the event to another element, which is also similar to the sample link I posted. Did you read my update? :) — paul smith, Sep 25 '12 at 23:29

Joe · Accepted Answer · 2012-09-25T15:50:51.477

I've had "good luck" with this code:

$.extend($.Event(event.type /* click, mousedown, touchstart, ect. ect. */), {
    which: 1,
    clientX: event.clientX,
    clientY: event.clientY,
    pageX: event.pageX,
    pageY: event.pageY,
    screenX: event.screenX,
    screenY: event.screenY
});

Obviously, this is everything; but you can add what you actually need in the other object. I create a new event here, because I'm actually forwarding an event to another element.

Update:

I use jQuery Touch Punch Plugin which basically maps click/mouse events to the associated touch event: touchstart, touchesmoved, touchend. So if you forward this event as the mouse event:

var newEvent = $.extend($.Event(event.type), {
    which: 1,
    clientX: event.clientX,
    clientY: event.clientY,
    pageX: event.pageX,
    pageY: event.pageY,
    screenX: event.screenX,
    screenY: event.screenY
});

// touch punch will convert to a touch event if needed
$('.some-other-element').trigger(newEvent);

You simply need to include the touch punch script on your page. This will also allow jQuery UI elements to function on touch devices.

references:

I've added a little more info. Seems like we are accomplishing similar goals. — Joe, Sep 25 '12 at 15:51
+1. It's probably the best to write own function which will copy all the attributes you need. — Michał Miszczyszyn, Sep 26 '12 at 09:21

score 2 · Answer 2 · edited May 23 '17 at 10:28

The answer herein, labeled "Just pass in the native event argument,"

function (e) {
    var $event = $.Event(e.type, e);
}

won't work if you want to change the event type: jQuery will replace your specified event type parameter with the event type from the event object you pass. So this approach works only as a means of exactly cloning an event object. When doing so, I suggest using null in place of the event type parameter, as a semantic hint that the event is being strictly cloned:

function (e) {
    var event = $.Event(null, e); // clone event
}

Of course, you can always change the event's type value after cloning:

function (kind, e) {
    var event = $.Event(null, e); // clone event
    event.eventType = kind;

    return event;
}

gfullam · Answer 3 · 2016-06-27T13:14:39.197

1

Just pass in the native event argument

function (e) {
    var $event = $.Event(e.type, e);
}

Because all the properties that you can manually set already exist in the native event argument, and because the $.Event() constructor takes an object as its second argument, you can simply pass the native event argument into it.

Note: You must pass in the event type separately as the first argument for this to work, otherwise jQuery will just store your event object in $event.originalEvent.

edited Jun 27 '16 at 13:14

answered Mar 19 '15 at 20:55

gfullam

11,531
5
50
64

1

great this should be the answer – kofifus Jun 27 '16 at 06:24

score 0 · Answer 4 · answered Sep 24 '12 at 20:51

var eDemo = jQuery.Event("eventhandler", {
    target: e.currentTarget,
    relatedTarget: e.relatedTarget,
    pageX: e.pageX,
    pageY: e.pageY,
    which: e.which,    
});

var newObject = jQuery.extend(true, {}, eDemo);// deep copy

Checkout Jquery event construct -> http://api.jquery.com/category/events/event-object/

Cloning an event object in Javascript/jQuery

4 Answers4

Just pass in the native event argument

Linked