序列化/镜像JavaScript鼠标/触摸事件

Question

我希望通过理想的序列化并将它们从浏览器A发送到浏览器B来镜像两个浏览器之间的JavaScript鼠标/触摸事件。 鼠标事件对象似乎包含循环引用，因此不可序列化。

最终我想要实现的是在远程浏览器中引发相同的事件，这些事件在本地触发。

鉴于事件引用了本地DOM对象，很可能是使用鼠标或触摸事件是不可取的。任何提示/想法都赞赏。

Answer 1

您可能需要做的就是决定要传输的属性，变量等的子集。将它们存储在可以序列化的对象文字中。由于您将自己构建对象，因此可以控制循环引用。

对于您的活动，您需要为需要捕获的任何内容设置事件侦听器。

我可能会建议查看类似Backbone.js的内容。它提供了一些有趣的功能，如键/值观察，可能对您有所帮助。

此外，这听起来像node.js非常适合的应用程序。由于它还支持Backbone，您可以设想创建一个客户端和服务器js环境，它们在事件，变量等方面相互镜像。当iPad上的用户执行更新客户端模型的操作时，可以序列化并发送这些更改到节点服务器。然后它将更新其客户端模型的内部表示，并使用诸如socket.io之类的东西将这些更改推送到其他客户端。

Answer 2

在我看来，你有两个不同的问题：

1. 如何捕获和序列化鼠标事件。这非常简单。
2. 如何在另一个上下文中重新创建这些鼠标事件。这很棘手。

即使不使用像jQuery这样的库，捕获鼠标事件也相当简单（特别是如果您暗示，您可以确定客户端将使用的浏览器）。您需要做的就是倾听事件，获取所需信息，然后通过传输层发送，例如。

document.body.addEventListener('click', function(e) {
    sendToOtherBrowser({ type: 'click', pageX: e.pageX, pageY: e.pageY });
}, false);

我不知道你需要的不仅仅是大多数活动的事件类型和位置。更难的部分是获取此事件数据并在其他地方重新创建它。要做到这一点，我认为你需要注意：

1. 捕捉e.target以及
2. 为DOM元素提供了一个可序列化的唯一ID
3. 发送包含您的活动数据的ID
4. 使用唯一ID来获取对其他浏览器中DOM元素的引用
5. 使用myUniqueElement.dispatchEvent之类的内容重新创建活动

我会说（2）和（4）是棘手的部分 - 您可以查看these related questions的想法。对于（5），您可以查看event simulation examples here。

所有这一切，我不知道这对触摸事件有什么用处 - 它可能不像鼠标事件那么容易（已经不是那么容易了）。