在 Javascript 中捕获 setInterval() 上的鼠标位置答案

【问题标题】：Capture mouse position on setInterval() in Javascript在 Javascript 中捕获 setInterval() 上的鼠标位置
【发布时间】：2009-10-22 16:43:49
【问题描述】：

我在 Javascript 中有一个函数，可以根据鼠标位置移动一个 div。此函数设置在 setInterval() 函数上，每秒执行一次。我需要像这样捕获鼠标位置：

function mousemov() {
  document.getElementById("myDiv").style.left = Event.clientX; //don't work
}

window.onload = function() {
  setInterval("mousemov()",1000);
}

Ps：我不能使用mousemove事件，因为即使鼠标停止也必须执行该函数。

【问题讨论】：

为什么不使用 mousemove 事件？如果鼠标没有移动，你真的不想改变div 的坐标。仅在 mousemove 上更新坐标。
如果鼠标停止，不能使用之前在 mouseMove 事件中得到的值吗？

标签： javascript dom-events mouseevent

【解决方案1】：

您可以访问事件对象的唯一时间是在事件处理程序执行期间。所以你需要做的是在文档上创建一个 OnMouseMove 事件并将鼠标坐标存储在一个全局可访问的对象中。然后，您可以从脚本中的其他任何位置访问这些值以确定鼠标位置。

这是一个例子（你没有使用 jQuery，所以这是直接的 DOM 代码）：

document.onmousemove = function(e) {
    var event = e || window.event;
    window.mouseX = event.clientX;
    window.mouseY = event.clientY;
}

function mousemov() {
    document.getElementById("myDiv").style.left = window.mouseX;
}

window.onload = function() {
    setInterval(mousemov, 1000);
}

我应该注意 clientX 和 clientY 不考虑滚动。您需要检索滚动偏移并将它们应用于返回值。

【讨论】：

+1。您可能想要解释除非您捕获事件，否则不会创建事件对象。所以他本质上需要做的是捕获 mousemove 事件并将鼠标位置存储在全局可访问的位置，然后在间隔函数中使用该值。
另外，setInterval("functionName()", 1000) 不是一个好的做法（它类似于eval()）。选择setInterval(mousemov, 1000) 或setInterval(function() {mousemove()}, 1000)
仅供参考 clientX/clientY 排除任何可能存在的文档滚动。
感谢 Chetan 和 crescentfresh - 我已经更新了答案以反映您的 cmets。

【解决方案2】：

好吧，如果您听到鼠标移动文档并保存其位置，那么，只要您愿意，例如在你的情况下，每一秒你都有最新的注册鼠标位置。

这是一个 jquery 示例

$(document).ready(function()
 {
  $().mousemove(function(e)
   {
       window.mouseX = e.pageX;
       window.mouseY = e.pageY;
  });
});

你的鼠标移动功能是

function mousemov() { 
    document.getElementById("myDiv").style.left = window.mouseX;
}

【讨论】：