在没有任何鼠标移动事件(不移动鼠标)的情况下,是否可以在页面加载后使用 JavaScript 获取鼠标位置?
如何在没有事件的情况下获取鼠标位置(不移动鼠标)?
真正的答案:不,这是不可能的。
好的,我刚刚想到了一个方法。用覆盖整个文档的 div 覆盖您的页面。在里面,创建(比如说)2,000 x 2,000 个<a>
元素(这样:hover
伪类可以在 IE 6 中工作,见),每个 1 像素大小。:hover
为那些<a>
改变属性的元素创建一个 CSS规则(比方说font-family
)。在您的负载处理程序中,循环浏览 400 万个<a>
元素中的每一个,检查currentStyle
/getComputedStyle()
直到找到带有悬停字体的元素。从此元素推断回来以获取文档中的坐标。
注意不要这样做。
2020 年编辑:这不再起作用。似乎是这样,浏览器供应商对此进行了修补。因为大多数浏览器都依赖于铬,所以它可能是其核心。
旧答案:您还可以挂钩 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。因此,您可以使用光标检查用户是否在您的页面上。
您可以做的是为光标的坐标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);}
前面的代码每秒更新一次,并显示光标所在位置的消息。我希望这有帮助。
如果您渲染 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倍,你将有确切的鼠标位置。
您可以尝试类似于 Tim Down 建议的方法 - 但不要为屏幕上的每个像素设置元素,只需创建 2-4 个元素(框),并动态更改它们的位置、宽度、高度以划分屏幕上可能的位置通过2-4递归,从而快速找到鼠标的真实位置。
例如 - 第一个元素占据屏幕的左右半部分,然后是上半部分和下半部分。现在我们已经知道鼠标位于屏幕的哪四分之一,可以重复 - 发现这个空间的哪四分之一......