3

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

function myHandler(e) {
   // ...

   e = e.originalEvent;

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

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

   // ...
}

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

DISPATCH_REQUEST_ERR：DISPATCH_REQUEST_ERR：DOM 事件异常 1

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

4

4 回答 4

4

我对这段代码“好运”：

$.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 插件，它基本上将点击/鼠标事件映射到相关的触摸事件：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 元素在触摸设备上运行。

参考：

于 2012-09-24T20:39:58.577 回答
2

此处的答案标记为“只需传入本机事件参数”

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;
}
于 2015-03-31T23:58:52.807 回答
1

只需传入本机事件参数

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

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

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

于 2015-03-19T20:55:48.823 回答
0 
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

签出 Jquery 事件构造 -> http://api.jquery.com/category/events/event-object/

于 2012-09-24T20:51:51.500 回答