Javascript 如何在没有事件（不移动鼠标）的情况下获取鼠标位置？

页面加载后，是否可以在没有任何鼠标移动事件（没有移动鼠标）的情况下使用JavaScript获取鼠标位置？

真实答案：不，不可能

好的，我刚想到一个办法。用覆盖整个文档的div覆盖页面。在其中，创建（比如）2000x2000

元素（这样

：hover

伪类将在IE 6中工作，请参见），每个元素的大小为1像素。创建一个CSS

：为那些改变属性的
元素（比如
字体系列
）创建一个悬停规则。在load handler中，循环遍历400万个
元素，检查
currentStyle
/
getComputedStyle（）
，直到找到带有悬停字体的元素。从该元素向后推断，以获得文档内的坐标

注意：不要这样做
您可以做的是为光标的
x
和
y
坐标创建变量，每当鼠标移动时更新它们，并在一定时间间隔内调用函数以对存储的位置执行所需操作

当然，这样做的缺点是至少需要一次鼠标的初始移动才能使其工作。只要光标至少更新一次它的位置，我们就能够找到它的位置，不管它是否再次移动

var cursor_x = -1;
var cursor_y = -1;
document.onmousemove = function(event)
{
 cursor_x = event.pageX;
 cursor_y = event.pageY;
}
setInterval(check_cursor, 1000);
function check_cursor(){console.log('Cursor at: '+cursor_x+', '+cursor_y);}

前面的代码每秒更新一次，并显示光标所在位置的消息。我希望这能有所帮助。
我设想您可能有一个带有计时器的父页面，在完成一定时间或任务后，您可以将用户转发到新页面。现在您需要光标的位置，因为他们正在等待，所以他们不必触摸鼠标。因此，使用标准事件在父页面上跟踪鼠标，并在get或post变量中将最后一个值传递给新页面

var x = 0;
var y = 0;

document.addEventListener('mousemove', onMouseMove, false)

function onMouseMove(e){
    x = e.clientX;
    y = e.clientY;
}

function getMouseX() {
    return x;
}

function getMouseY() {
    return y;
}

您可以在父页面上使用JHarding的代码，以便在全局变量中始终可以使用最新的位置：

var cursorX;
var cursorY;
document.onmousemove = function(e){
    cursorX = e.pageX;
    cursorY = e.pageY;
}

这对通过父页面以外的方式导航到此页面的用户没有帮助。
我实现了一个水平/垂直搜索（首先让一个div充满水平排列的垂直线链接，然后让一个div充满垂直排列的水平线链接，只需看看哪个链接具有悬停状态），就像上面Tim Down的想法一样，而且它工作得相当快。遗憾的是，在KDE上的Chrome32上不起作用

jsfiddle.net/5XzeE/4/
编辑2020:这已经不起作用了。浏览器供应商似乎已经解决了这个问题。因为大多数浏览器都依赖于chromium，所以它可能是其核心

旧答案：
您还可以钩住mouseenter（当mousecursor位于页面内部时，此事件在页面重新加载后激发）。扩展损坏的代码应该可以做到以下几点：


var x=null；
var y=null；
document.addEventListener（'mousemove'，onMouseUpdate，false）；
document.addEventListener（'mouseenter'，onMouseUpdate，false）；
函数onMouseUpdate（e）{
x=e.pageX；
y=e.pageY；
控制台日志（x，y）；
}
函数getMouseX（）{
返回x；
}
函数getMouseY（）{
返回y；
}
您可以尝试类似于Tim Down建议的方法，但不要在屏幕上为每个像素创建元素，只创建2-4个元素（框），并动态更改它们的位置、宽度和高度，以递归方式将屏幕上可能的位置除以2-4，从而快速找到鼠标的实际位置

例如，第一个元素占据屏幕的右半部分和左半部分，然后是上半部分和下半部分。到目前为止，我们已经知道鼠标位于屏幕的哪个区域，能够重复-发现这个区域的哪个区域…
@Tim Down的答案是不正确的，如果您渲染2000 x 2000
元素：

好的，我刚想到一个办法。在页面上覆盖一个div
涵盖整个文件。在里面，创建（比如）2000x2000
元素（这样：hover伪类将在IE 6中工作，请参见），
每1个像素的大小。为这些元素创建一个CSS:hover规则
这会更改属性（例如字体族）。在加载处理程序中，
循环检查400万个元素中的每一个，检查
currentStyle/getComputedStyle（），直到找到具有
悬停字体。从这个元素向后推，得到坐标
在文件中

注意，不要这样做

但您不必一次渲染400万个元素，而是使用二进制搜索。只需使用4个
元素即可：


步骤1：将整个屏幕视为起始搜索区域
步骤2：将搜索区域拆分为2 x 2=4个矩形
元素
步骤3：使用
getComputedStyle（）
函数确定鼠标悬停在哪个矩形中
步骤4：将搜索区域缩小到该矩形，然后从步骤2开始重复

这样，考虑到您的屏幕宽度不超过2048px，您最多需要重复这些步骤11次

因此，您将生成最多11 x 4=44个
元素

如果你不需要精确地确定鼠标在像素上的位置，但是说10px精度是可以的。重复这些步骤最多8次，因此需要绘制最多8 x 4=32个
元素

由于DOM通常速度较慢，因此生成并销毁
元素也不太可能。相反，您可以重复使用最初的4个
元素，并在循环执行步骤时调整它们的
顶部
、
左侧
、
宽度
和
高度

现在，创建4
也是一种过激行为。相反，在测试每个矩形中的
getComputedStyle（）
时，可以重用相同的
元素。因此，与其将搜索区域拆分为2 x 2
元素，不如重用单个
元素
document.body.addEventListener('click',function(e)
{
    console.log("cursor-location: " + e.clientX + ',' + e.clientY);
});

$(':hover').last().offset()

(function () {
    window.currentMouseX = 0;
    window.currentMouseY = 0;

    // Guess the initial mouse position approximately if possible:
    var hoveredElement = document.querySelectorAll(':hover');
    hoveredElement = hoveredElement[hoveredElement.length - 1]; // Get the most specific hovered element

    if (hoveredElement != null) {
        var rect = hoveredElement.getBoundingClientRect();
        // Set the values from hovered element's position
        window.currentMouseX = window.scrollX + rect.x;
        window.currentMouseY = window.scrollY + rect.y;
    }

    // Listen for mouse movements to set the correct values
    window.addEventListener('mousemove', function (e) {
        window.currentMouseX = e.pageX;
        window.currentMouseY = e.pageY;
    }, /*useCapture=*/true);
}())

// create a div(#mydiv) 1px by 1px set opacity to 0 & position:absolute;

var x,y;


$('body').mousemove(function( e ) {

    var x = e.clientX - (window.innerWidth / 2);
    var y = e.clientY - (window.innerHeight / 2);
 }


function looping (){

   /* track my div position 60 x 60 seconds!
      with out the mouse after initiation you can still track the dummy div.x & y
      mouse doesn't need to move.*/

   $('#mydiv').x = x;    // css transform x and y to follow 
   $('#mydiv)'.y = y;

   console.log(#mydiv.x etc)

   requestAnimationFrame( looping , frame speed here);
}  

window.getSelection().getRangeAt(0).startOffset