cloning an event object in javascript/jquery

问题

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 hardcoding 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.

回答1:

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:

jQuery Event Constructor
jQuery trigger

回答2:

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

回答3:

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.

回答4:

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/

来源：https://stackoverflow.com/questions/12572474/cloning-an-event-object-in-javascript-jquery

标签

javascript

jquery

javascript-events