在Javascript / jQuery中克隆事件对象[重复]

Question

如何创建一个完全独立的新事件对象，它包含与给定事件对象e 完全相同的所有属性。到目前为止，我已经尝试了以下但没有运气：

function myHandler(e) {
   // ...

   e = e.originalEvent;

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

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

   // ...
}

编辑：我将添加更多细节以帮助澄清。与question 非常相似，我正在尝试这样做：div.dispatchEvent(e.originalEvent)，但这样做会导致：

DISPATCH_REQUEST_ERR：DISPATCH_REQUEST_ERR：DOM 事件异常 1

所以为了避免这种情况，我需要复制事件对象。然而，这个事件对象不是一个特定的对象（即，有时e 是touchstart、touchmove 或touchend），因此如果我可以得到一个通用的克隆函数会更容易只是对特定属性进行硬编码。我所说的“没有运气”的意思是，通过尝试上述方法并通过调度函数发送它，我得到了错误。希望这有助于澄清一点。

Answer 1

我对这段代码“好运”：

$.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
});

显然，这就是一切；但是您可以在另一个对象中添加您实际需要的内容。我在这里创建一个新事件，因为我实际上是在将一个事件转发给另一个元素。

---

更新：

我使用jQuery Touch Punch Plugin，它基本上将点击/鼠标事件映射到相关的触摸事件：touchstart、touchesmoved、touchend。所以如果你把这个事件作为鼠标事件转发：

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

您只需要在您的页面上包含触摸打孔脚本。这也将允许 jQuery UI 元素在触摸设备上运行。

参考：

• jQuery Event Constructor
• jQuery trigger

Answer 2

这里的答案，标记为“Just pass in the native event argument”，

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

如果你想改变事件类型将不起作用：jQuery 将用你传递的事件对象中的事件类型替换你指定的事件类型参数。所以这种方法只能作为一种精确克隆事件对象的方法。这样做时，我建议使用 null 代替事件类型参数，作为严格克隆事件的语义提示：

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

当然，你可以在克隆后随时更改事件的类型值：

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

    return event;
}

Answer 3

只需传入原生事件参数

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

因为您可以手动设置的所有属性都已存在于原生事件参数中，并且因为 $.Event() 构造函数将对象作为其第二个参数，所以您可以简单地将原生事件参数传递给它。

注意：你必须单独传入事件类型作为第一个参数，否则jQuery只会将你的事件对象存储在$event.originalEvent中。

Answer 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 事件构造 -> http://api.jquery.com/category/events/event-object/