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 Events Exception 1

所以为了避免这种情况，我需要复制事件对象。但是，此事件对象不是特定的事件（即，有时e是触摸启动，触摸移动或触摸），因此如果我可以获得通用克隆功能而不仅仅是硬编码特定属性会更容易。我的意思是“没有运气”是通过尝试上述方法并通过调度功能发送我得到错误。希望这有助于澄清一点。

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

此处的答案，标有＆＃34; Just pass in the native event argument，＆＃34;

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

在javascript / jquery中克隆事件对象

4 个答案:

只需传入本机事件参数