如何在没有事件的情况下获得鼠标位置(不移动鼠标)？

Question

是否可以在页面加载后使用JavaScript获取鼠标位置而无需任何鼠标移动事件(不移动鼠标)？

Answer 1

真实答案:不,这是不可能的.

好的,我刚想到了一个方法.使用覆盖整个文档的div覆盖页面.在其中,创建(比方说)2,000 x 2,000个<a>元素(以便:hover伪类可以在IE 6中工作,请参阅),每个像素大小为1个像素.:hover为那些<a>改变属性的元素创建一个CSS 规则(比方说font-family).在你的加载处理程序中,循环遍历400万个<a>元素中的每一个,检查currentStyle/ getComputedStyle()直到找到具有悬停字体的元素.从该元素推断回来以获得文档中的坐标.

NB 不要这样做.

Answer 2

您还可以挂钩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 3

你可以做的是为光标x和y坐标创建变量,每当鼠标移动时更新它们,并在一个间隔内调用一个函数来完成你所需要的存储位置.

当然,其缺点是需要至少一次鼠标初始移动才能使其工作.只要光标至少更新其位置一次,我们就能找到它的位置,无论它是否再次移动.

var cursorX;
var cursorY;
document.onmousemove = function(e){
    cursorX = e.pageX;
    cursorY = e.pageY;
}
setInterval(checkCursor, 1000);
function checkCursor(){
    alert("Cursor at: " + cursorX + ", " + cursorY);
}

上述代码每秒更新一次,并显示光标所在的消息.我希望这有帮助.

Answer 4

您可以尝试类似于Tim Down建议的内容 - 但不是为屏幕上的每个像素添加元素,而是创建2-4个元素(框),并动态更改其位置,宽度,高度以在屏幕上划分可能的位置递归地通过2-4,从而快速找到鼠标的真实位置.

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

Answer 5

这是我的解决方案。它导出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 6

如果渲染2,000 x 2,000个<a>元素，则@Tim Down的答案无效。

好的，我刚刚想到了一种方法。用覆盖整个文档的div覆盖页面。在其中，创建（说）2,000 x 2,000个元素（以便：hover伪类可在IE 6中使用，请参见），每个元素的大小为1像素。为那些更改属性的元素创建CSS：hover规则（比如说font-family）。在负载处理程序中，循环浏览这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>也是一个过大的杀伤力。相反，在每个矩形中<a>进行测试时，可以重复使用相同的一个元素getComputedStyle()。因此，与其将搜索区域划分为2 x 2个<a>元素，不如<a>通过使用top和left样式属性移动元素来重用单个元素。

因此，您只需要单个<a>元素更改其width和height最大11次，然后更改其top和left最大44次，您将拥有准确的鼠标位置。

Answer 7

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

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

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

Answer 8

是的，这是可能的。

如果您向文档添加“mouseover”事件，它将立即触发，并且您可以获得鼠标位置，当然，如果鼠标指针位于文档上方。

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

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

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