Javascript 捕捉鼠标动作

首先，一些背景：

我需要开发一个web应用程序，在后台收集用户（在访问网页期间）的所有鼠标动作，将它们以适当的格式存储在一个文件中，然后再开发一个单独的重播应用程序，该应用程序将与该文件一起提供，并将生成如下内容：

曲线是鼠标移动，圆圈是单击或保持静止

我有或多或少的重播应用程序解决方案

我需要一个解决方案，捕捉用户鼠标动作，并将其保存在服务器上的文件中

对于每个用户，应该有单独的文件。文件的格式不是预先确定的，但以下是合理的：

<timestamp1> MOVE TO <x1>, <y1>
<timestamp2> MOVE TO <x2>, <y2>
<timestamp3> MOVE TO <x3>, <y3>
<timestamp4> CLICK
<timestamp5> RIGHT-CLICK
<timestamp6> MOVE TO <x6>, <y6>
<timestamp7> MOVE TO <x7>, <y7>

移动到，
移到，
移到，
点击
右击
移到，
移到，

---

我想知道你们是否能帮助我设计和实现这种鼠标动作捕捉的方法。最好。

您可以使用

单击

、

鼠标移动

等事件轻松捕获鼠标动作。在您提到的注释中，您知道如何执行此操作，因此我将不详细介绍

您不能直接“打开”服务器上的文件，因为代码是在完全不同的机器（即客户端）上执行的，所以您需要做的是每秒或几秒钟将数据从客户端发送到服务器

有几种方法可以做到这一点，这里有一种方法：

从

document.cookie

或

localStorage

中检查并获取唯一的用户ID，如果没有，则生成一个（使用

Date（）

和/或

Math.random（）

）

绑定事件要捕获鼠标动作，这些事件将数据（以您想要的格式）写入数组

窗口。captureMouse

每秒向服务器发送一个Ajax请求（根据用户数量、服务器速度，您可能需要更改间隔）

一段示例代码可以更好地说明这个想法（使用jQuery）

---

在您的服务器上，您将获得

captureMouse

作为POST，您需要解码JSON并将其附加到一个文件（使用userId参数进行标识）。

您可以使用

单击

，

mousemove

等事件轻松捕获鼠标动作。在您提到的注释中，您知道如何执行此操作，所以我不会详细说明这一点

您不能直接“打开”服务器上的文件，因为代码是在完全不同的机器（即客户端）上执行的，所以您需要做的是每秒或几秒钟将数据从客户端发送到服务器

有几种方法可以做到这一点，这里有一种方法：

从

document.cookie

或

localStorage

中检查并获取唯一的用户ID，如果没有，则生成一个（使用

Date（）

和/或

Math.random（）

）

绑定事件要捕获鼠标动作，这些事件将数据（以您想要的格式）写入数组

窗口。captureMouse

每秒向服务器发送一个Ajax请求（根据用户数量、服务器速度，您可能需要更改间隔）

一段示例代码可以更好地说明这个想法（使用jQuery）

---

在您的服务器上，您将获得

captureMouse

作为POST，您需要解码JSON并将其附加到一个文件（使用userId参数进行标识）。

如果您计划使用javascript收集点击数据，那么这真的很容易。只需将事件侦听器附加到窗口或文档，然后为此编写一个日志函数。@zfor，谢谢您的评论。看，这就是我的困境开始的地方。我目前的设想是：1）用户打开一个网页；在服务器上创建一个文件，稍后可以通过特殊的文件名/会话ID 2）用户播放页面来识别该文件，并且在每次鼠标操作时，都会向服务器发送一些内容，然后记录在相应的文件中。JavaScript可以主要在客户端发挥作用，甚至可能在服务器端（节点）发挥作用。@vivided这是什么样的隐私侵犯：O@Markasoftware事实上，今天，每天，在每个地方，你所拥有的比这更糟糕。如果你正在重新发明轮子，如果你计划用javascript收集点击数据，那么这真的很容易。只需将事件侦听器附加到窗口或文档，然后为此编写一个日志函数。@zfor，谢谢您的评论。看，这就是我的困境开始的地方。我目前的设想是：1）用户打开一个网页；在服务器上创建一个文件，稍后可以通过特殊的文件名/会话ID 2）用户播放页面来识别该文件，并且在每次鼠标操作时，都会向服务器发送一些内容，然后记录在相应的文件中。JavaScript可以主要在客户端发挥作用，甚至可能在服务器端（节点）发挥作用。@vivided这是什么样的隐私侵犯：O@Markasoftware事实上，今天，每一天，每一个地方，你所拥有的比这更糟糕。如果你是在重新发明轮子，非常感谢你的回复，我会详细看看，乍一看很酷！！是的，看起来这正是我所需要的。谢谢大家的回复，我会仔细看一看，乍一看很酷！！是的，看起来这正是我需要的。

userId = fetchOrSetUserId()   // Make this function

captureMouse = []
$('#id').on('click', function(e) {
    captureMouse.push({
        event: 'click',
        target: $(this).attr('id'),
    })
})

// ... more events ...

sendData = function() {
    // You probably need to do locking here, since captureMouse may be changed in an event before it's reset
    send = captureMouse
    captureMouse = []

   jQuery.ajax({
       url: '/store-data',
       type: 'post',
       data: {
           userId: userId,
           captureMouse: JSON.stringify(send)
       },
       success: function() {
           // Once this request is complete, run it again in a second ... It keeps sending data until the page is closed
           setTimeout(sendData, 1000)
       }
   })
}

// Start sending data
sendData()