鼠标停止或改变方向时获取鼠标坐标答案

【问题标题】：Get mouse coordinates when mouse stop or change direction鼠标停止或改变方向时获取鼠标坐标
【发布时间】：2012-08-27 09:47:32
【问题描述】：

我用简单的代码得到鼠标位置：

$("#container").mousemove( function(e) {

    client_x = e.pageX;
    client_y = e.pageY;

        // save coordinates

});

但是我只需要鼠标改变方向时的开始和停止坐标+坐标，所以我可以“复制”鼠标移动。

我想我需要某种计时器来查看鼠标是否停止了一段时间？

【问题讨论】：

1:[{"x":"681","y":"144"}, 2:{"x":"681","y":"145"}, 3 :{"x":"681","y":"146"}, 4:{"x":"680","y":"147"}, 5:{"x":"680", "y":"148"}，在实例 4 中，X 的方向发生了变化，但在本例中 Y 始终在变化。
首先我需要检测停止和开始位置（即仅停止位置）
我觉得这没什么用。鼠标几乎总是沿对角线移动。
@MaxArt，你是对的。我想我会得到停止坐标 + 每隔 X 间隔得到坐标。因为我要动画鼠标移动，我只需要 stop 位置，它们有很多数据来保存和动画从鼠标的每个位置
旧问题，但已链接。如果您只想要鼠标停止时的鼠标坐标，那么您可以debounce mousemove 事件。但是，“改变方向”并不相同——这甚至意味着什么？这不就是一个动作吗？

标签： javascript jquery mousemove

【解决方案1】：

var timer, timer2 = 0, client_x, client_y; //I made them global since it's easier
$("#container").mousemove( function(e) {
  clearTimeout(timer);
  client_x = e.pageX;
  client_y = e.pageY;
  if((new Date()).getTime() > timer2 + 2000) {
    timer2 = (new Date()).getTime(); //just in case this event handler gets called again before the timer runs doCopy
    setTimeout(doCopy, 1); //run "outside" the event handler (since it's not good for an event handler to take a long time
  } else {
    timer = setTimeout(doCopy, 1000);
  }
});

function doCopy() {
  timer2 = (new Date()).getTime();
  .....
}

这是不断设置和清除计时器。如果鼠标停止 1 秒，doCopy() 函数就会被触发。

【讨论】：

这甚至不会尝试检测方向变化。老鼠的移动不是那么顺畅——你可能会向左移动，但上/下不断抖动，看起来像是方向变化。您需要添加平滑才能对此进行尝试。
谢谢你这工作正常！你能帮我添加一个额外的代码吗？我想扩展它，所以如果鼠标停止或不停止，它每 2 秒调用一次 doCopy() + 这是刚才在做什么？
即使鼠标完全静止，是否要每 2 秒记录一次鼠标位置？还是在它移动时每 2 秒一次，并在它停止的那一刻记录一次？
移动时每 2 秒加上停止时每 2 秒
@mgalesic 好的，我添加了执行此操作的代码 - 但请注意，我尚未对其进行测试。它的作用是，如果自上次doCopy() 以来已经超过 2 秒，那么在那一刻运行一个。如果鼠标不动，什么都不会发生。另请注意，您会收到一些重复的通知，但不会太多。