在javascript / jquery中克隆事件对象 [英] cloning an event object in javascript/jquery

问题描述

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

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

   // ...
}

编辑：我将添加更多细节以帮助澄清。非常类似于我想要做的问题：div.dispatchEvent（e.originalEvent），但这样做会导致：

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

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

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.

推荐答案

我用这段代码祝你好运：

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.

---

更新 ：

我使用的是 jQuery Touch Punch Plugin 将点击/鼠标事件映射到相关的触摸事件：touchstart，touchesmoved，touchend。因此，如果您将此事件转发为鼠标事件：

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

您只需在页面上加入触控打孔脚本即可。这也将允许jQuery UI元素在触摸设备上运行。

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

引用：

• jQuery Event Constructor


• jQuery触发器

• jQuery Event Constructor
• jQuery trigger

这篇关于在javascript / jquery中克隆事件对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！