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

Question

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

Answer 1

真正的答案：不，不可能。

好的，我刚刚想到了一个办法。用覆盖整个文档的 div 覆盖您的页面。在其中，创建（比如说）2,000 x 2,000 <a> 元素（这样:hover 伪类将在 IE 6 中工作，请参阅），每个元素大小为 1 个像素。为那些更改属性的<a> 元素创建一个CSS :hover 规则（比如font-family）。在您的负载处理程序中，循环浏览 400 万个 <a> 元素中的每一个，检查 currentStyle / getComputedStyle() 直到找到带有悬停字体的那个。从此元素外推以获取文档中的坐标。

注意不要这样做。

Answer 2

您可以做的是为光标的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);}

上述代码每秒更新一次，并显示光标所在位置的消息。我希望这会有所帮助。

Answer 3

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;
}

Answer 4

我设想您可能有一个带有计时器的父页面，并且在一定时间或任务完成后，您将用户转发到一个新页面。现在您需要光标位置，因为它们正在等待，它们不一定会触摸鼠标。因此，使用标准事件在父页面上跟踪鼠标，并在 get 或 post 变量中将最后一个值传递给新页面。

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

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

这不会帮助通过您的父页面以外的方式导航到此页面的用户。

Answer 5

我实现了一个横向/纵向的搜索，（先做一个横向排列的全竖线链接的div，然后再做一个纵向排列的全横线链接的div，简单看看哪个有hover状态）就像Tim Down的想法上面，它工作得非常快。遗憾的是，在 KDE 上的 Chrome 32 上不起作用。

jsfiddle.net/5XzeE/4/

Answer 6

Edit 2020：这不再工作了。浏览器供应商似乎已经修补了这个问题。因为大多数浏览器都依赖于 Chromium，所以它可能是它的核心。

旧答案： 您还可以挂钩 mouseenter （此事件在页面重新加载后触发，当鼠标光标在页面内时）。扩展 Corrupted 的代码应该可以解决问题：

var x = null;
var y = null;
    
document.addEventListener('mousemove', onMouseUpdate, false);
document.addEventListener('mouseenter', onMouseUpdate, false);
    
function onMouseUpdate(e) {
  x = e.pageX;
  y = e.pageY;
  console.log(x, y);
}

function getMouseX() {
  return x;
}

function getMouseY() {
  return y;
}

您还可以在 mouseleave-event 上将 x 和 y 设置为 null。因此，您可以使用光标检查用户是否在您的页面上。

Answer 7

您可以尝试类似于 Tim Down 建议的方法 - 但不是为屏幕上的每个像素创建元素，而是仅创建 2-4 个元素（框），并动态更改它们的位置、宽度、高度以划分可能屏幕上的位置递归2-4，从而快速找到鼠标的真实位置。

例如 - 第一个元素占据屏幕的左右半部分，然后是上半部分和下半部分。到目前为止，我们已经知道鼠标位于屏幕的哪个四分之一，能够重复 - 发现这个空间的哪个四分之一......

Answer 8

如果您渲染 2,000 x 2,000 <a> 元素，@Tim Down 的答案是不高效的：

好的，我刚刚想到了一个办法。用 div 覆盖您的页面 涵盖整个文档。在里面，创建（比如说）2,000 x 2,000 元素（这样 :hover 伪类将在 IE 6 中工作，请参阅）， 每 1 个像素大小。为这些元素创建一个 CSS :hover 规则 这会改变一个属性（比如说字体系列）。在您的负载处理程序中， 循环遍历 400 万个元素中的每一个，检查 currentStyle / getComputedStyle() 直到找到带有 悬停字体。从此元素外推以获得坐标 在文档中。

注意不要这样做。

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

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

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

因此您将生成最多 11 x 4 = 44 个<a> 元素。

如果您不需要将鼠标位置精确到一个像素，但说 10px 精度是可以的。您最多会重复这些步骤 8 次，因此您最多需要绘制 8 x 4 = 32 <a> 元素。

同时生成然后销毁<a> 元素也不会执行，因为 DOM 通常很慢。相反，您可以重复使用最初的 4 个<a> 元素，并在循环执行步骤时调整它们的top、left、width 和height。

现在，创建 4 个<a> 也是一种矫枉过正。相反，您可以在每个矩形中测试getComputedStyle() 时重复使用相同的<a> 元素。因此，不要将搜索区域拆分为 2 x 2 <a> 元素，只需使用 top 和 left 样式属性移动单个 <a> 元素即可。

因此，您只需将单个 <a> 元素更改其 width 和 height 最多 11 次，并将其 top 和 left 最多更改 44 次，您将获得准确的鼠标位置。

Answer 9

您不必移动鼠标来获取光标的位置。除了 mousemove 之外的事件也会报告该位置。下面以 点击事件 为例：

document.body.addEventListener('click',function(e)
{
    console.log("cursor-location: " + e.clientX + ',' + e.clientY);
});

Answer 10

最简单的解决方案，但不是 100% 准确

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

结果：{top: 148, left: 62.5}
结果取决于最近的元素大小并在用户切换标签时返回undefined

Answer 11

参考@SuperNova's answer，这是一种使用 ES6 类的方法，可以在回调中保持this 的上下文正确：

class Mouse {
  constructor() {
    this.x = 0;
    this.y = 0;
    this.callbacks = {
      mouseenter: [],
      mousemove: [],
    };
  }

  get xPos() {
    return this.x;
  }

  get yPos() {
    return this.y;
  }

  get position() {
    return `${this.x},${this.y}`;
  }

  addListener(type, callback) {
    document.addEventListener(type, this); // Pass `this` as the second arg to keep the context correct
    this.callbacks[type].push(callback);
  }

  // `handleEvent` is part of the browser's `EventListener` API.
  // https://developer.mozilla.org/en-US/docs/Web/API/EventListener/handleEvent
  handleEvent(event) {
    const isMousemove = event.type === 'mousemove';
    const isMouseenter = event.type === 'mouseenter';

    if (isMousemove || isMouseenter) {
      this.x = event.pageX;
      this.y = event.pageY;
    }

    this.callbacks[event.type].forEach((callback) => {
      callback();
    });
  }
}

const mouse = new Mouse();

mouse.addListener('mouseenter', () => console.log('mouseenter', mouse.position));
mouse.addListener('mousemove', () => console.log('mousemove A', mouse.position));
mouse.addListener('mousemove', () => console.log('mousemove B', mouse.position));

Answer 12

这是我的解决方案。它导出您可以在任何地方使用的 window.currentMouseX 和 window.currentMouseY 属性。它最初使用悬停元素（如果有）的位置，然后侦听鼠标移动以设置正确的值。

(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);
}())

Composr CMS来源：https://github.com/ocproducts/composr/commit/a851c19f925be20bc16bfe016be42924989f262e#diff-b162dc9c35a97618a96748639ff41251R1202

Answer 13

我想我可能有一个合理的解决方案，不计算 div 和像素..lol

只需使用动画帧或函数的时间间隔。您仍然需要一次鼠标事件，尽管只是为了启动，但从技术上讲，您可以将其放置在您喜欢的任何位置。

基本上我们在没有鼠标移动的情况下一直跟踪一个虚拟 div。

// 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);
}  

Answer 14

不是鼠标位置，但是，如果您正在寻找 当前光标位置（用于获取最后输入的字符等用例），那么下面的 sn-p 可以正常工作。
这将为您提供与文本内容相关的光标索引。

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

Answer 15

是的，有可能。

如果你在文档中添加“mouseover”事件，它会立即触发并且你可以获得鼠标位置，当然如果鼠标指针在文档上。

   document.addEventListener('mouseover', setInitialMousePos, false);

   function setInitialMousePos( event ) {
       console.log( event.clientX, event.clientY);
       document.removeEventListener('mouseover', setInitialMousePos, false);
   }

以前可以通过window.event 读取鼠标位置，但现在已弃用。