Javascript 在没有mousemove事件的情况下跟踪鼠标的相对位置

我需要跟踪鼠标相对于应用程序中

元素的位置。目前，我有一个

mousemove

事件监听器连接到

事件监听器，该监听器可以在鼠标启动时使用

offsetX

/

offsetY

更新鼠标位置，如果

offsetX/Y

不可用，则使用

layerX

。使用

offsetX/Y

或

layerX/Y

可以得到鼠标相对于

的坐标，这正是我想要的。当我的应用程序发挥其魔力时，各种CSS 3d转换被应用到

，即使

非常转换，

offsetX/Y

仍能在

的局部转换坐标空间中为我提供准确的坐标

这有点让人困惑，所以我试着举个例子。如果my

的宽度和高度均为100px，并且相对于浏览器视口位于（0,0）处，我单击（50,50）（在视口坐标中），这对应于my

中的（50,50），并且50是通过

偏移量x

和

偏移量
返回的值（正确）。如果我随后将
transform:translate3d（20px，20px，0px）
应用于我的
并单击（50,50）（在视口坐标中），因为我的画布已向下移动20px，向右移动20px，这实际上与相对于
的（30,30）相对应，30是正确的值通过
offsetX
和
offsetY
返回

我面临的问题是，当用户没有实际移动鼠标，而
正在被转换时，该怎么办。我只是在
mousemove
事件上更新鼠标的位置，所以当没有
mousemove
时我该怎么办

比如说。我的鼠标位于（50,50），没有对
应用任何转换。My
this.mouseX
和
this.mouseY
都等于50；当我将鼠标移动到（50,50）时，它们被保存在最后的
mousemove
事件中。不移动鼠标，我将上述转换（
transform:translate3d（20px，20px，0px）
）应用到我的
。现在，我需要
this.mouseX
和
this.mouseY
分别等于30，因为这是我的鼠标相对于当前
转换的新位置。但是
this.mouseX
和
this.mouseY
仍然等于50。由于我从未移动过鼠标，因此没有触发
mousemove
事件，并且保存的坐标从未更新

我该怎么处理？我考虑创建一个新的jQuery事件，根据我以前/以前的鼠标位置手动分配一些属性（
pageX
和
pageY
），然后触发该事件，但我认为这不会导致浏览器重新计算
offsetX
和
offsetY
属性。我也一直在考虑使用已知的旧/以前的鼠标位置并将其乘以我的变换矩阵，但这将变得非常复杂，因为我的鼠标坐标在2d空间中，但我应用于
的变换都是3d变换

我想真的，我想做的是将我已知的2d页面位置光线投射到3d空间中，找出我在哪里点击转换后的
，全部使用javascript（jQuery可用）

这可能吗？这有意义吗？
看起来，即使不移动鼠标，也要刷新鼠标位置值。您应该尝试以下方法：

var event = '';
var counter = 1;

$(function(e){
    event = e;
    window.setInterval(refresh, 10);
});

$(document).mousemove(function(e){
    event = e;
    refresh;
});

function refresh(){
    counter++;
    $('#mousepos').val("event.pageX: " + event.pageX + ", event.pageY: " + event.pageY + ", counter: " + counter)
}

计数器仅用于显示刷新。您可以将间隔设置为所需的任意值（10=10ms=0.01s），只需将.mousemove（）事件中的所有内容移动到这个refresh（）函数中，并正确调用它，即使您不移动鼠标，您的鼠标位置也会更新

看看这把小提琴，你会发现一个活生生的例子：

编辑：

因为我的小提琴不适合询问者，所以我更新了它：

新的是，无论发生什么情况，鼠标位置现在都是每0.1秒设置一次，而不是只在鼠标移动时才更新。
适用于所有浏览器

 var mouseX=0;
 var mouseY=0;
 var canvas = document.querySelector('#canvas');
 var rect = canvas.getBoundingClientRect();
 document.onmousemove = function(e) {
      mouseX=e.clientX-rect.left;
      mouseY=e.clientY-rect.top;
};
function updateCoords() {
      mouseX=e.clientX-mouseX;
      mouseY=e.clientY-mouseY;
      setTimeout(updatecoords,10);
}

现在我们可以调用一次函数来反复检查新位置

 updateCoords();

您可以将代码添加到
updateCords（）
函数中，它将每10毫秒执行一次

概念：
mouseX
和
mouseY
变量在
mousemove
事件中得到更新，并且在画布位置发生任何变化时也会得到更新。
如果您想在不移动鼠标的情况下获得“新”鼠标坐标，那么我认为您必须获取“旧”坐标（来自上次mousemove事件），然后自己“应用”这些值的转换来计算正确的“新”坐标。@CBroe我真的希望避免这种情况，但你可能是对的……谢谢你的建议，但不幸的是，这对我来说似乎不太管用。我对您的JSFIDLE进行了一些编辑以测试它。我添加了一个框，当您将鼠标悬停在该框上时，它会向右滑动，并将事件附加到该框而不是文档，当您将鼠标悬停在该框上并将其滑动时，您可以看到offsetX和offsetY值（相对于div而非页面的鼠标位置）在你真正移动鼠标之前不会被更新。我更新了我的答案。它现在应该像您预期的那样工作。
 updateCoords();