如何获得没有事件的鼠标位置(不移动鼠标)?

没有任何鼠标移动事件(不移动鼠标),是否可以在页面加载后使用JavaScript获取鼠标位置?

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

好的,我刚想到一个办法。 用覆盖整个文档的div覆盖您的页面。 在里面,创build(说)2000 x 2000 <a>元素(这样:hover伪类将在IE 6中工作,请参阅),每个像素的大小。 为那些改变属性的<a>元素(比如font-family )创build一个CSS :hover规则。 在你的载入处理程序中,遍历400万个<a>元素,检查currentStyle / getComputedStyle()直到findhover字体。 从这个元素外推后面的文件中获得坐标。

注意不要做这个

你也可以钩住mouseenter(这个事件在页面重新载入后,当鼠标在页面内时被触发)。 扩展损坏的代码应该做的伎俩:

 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; } function getMouseX() { return x; } function getMouseY() { return y; } 

你也可以在mouseleave事件中设置x和y为null。 所以你可以用光标检查用户是否在你的页面上。

你可以做的是为游标的xy坐标创buildvariables,每当鼠标移动时更新它们,并在间隔内调用一个函数来完成你所需要的存储位置。

这当然不利的一面是,鼠标至less需要一次初始移动才能使其工作。 只要光标至less更新一次,我们就可以find它的位置,而不pipe它是否再次移动。

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

上面的代码每秒钟更新一次你的光标所在的位置。 我希望这有帮助。

你可以尝试类似Tim Down的build议 – 但是不要在屏幕上为每个像素设置元素,只需要创build2-4个元素(盒子),然后dynamic地改变它们的位置,宽度和高度,以便在屏幕上划分可能的位置以2-4recursion,从而迅速find鼠标的真实位置。

例如 – 第一个元素取屏幕的左右两半,之后是上半部分和下半部分。 现在我们已经知道鼠标位于哪个屏幕的四分之一处,能够重复 – 发现这个空间的哪个部分…

我想,也许你有一个带有定时器的父页面,并且在一段时间之后,或者一个任务完成,你将用户转到一个新的页面。 现在你想要光标位置,并且因为他们在等待,他们不一定要触摸鼠标。 因此,使用标准事件在父页面上跟踪鼠标,并将最后一个值传递给get或postvariables中的新页面。

您可以在您的父页面上使用JHarding的代码,以便最新的位置始终可用于全局variables中:

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

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

@Tim Down的答案是不行的,如果你呈现2000 x 2000元素:

好的,我刚想到一个办法。 用覆盖整个文档的div覆盖您的页面。 在里面,创build(说)2000 x 2000元素(这样:hover伪类将在IE 6中工作,请参阅),每个像素的大小。 为那些改变属性的元素(比如font-family)创build一个CSS:hover规则。 在你的载入处理程序中,循环遍历400万个元素,检查currentStyle / getComputedStyle(),直到find带有hover字体的元素。 从这个元素外推后面的文件中获得坐标。

注意不要做这个。

但是,您不必一次渲染400万个元素,而是使用二进制search。 只需使用4个<a>元素:

  • 步骤1:将整个屏幕作为起始search区域
  • 第2步:将search区域拆分为2 x 2 = 4个矩形<a>元素
  • 第3步:使用getComputedStyle()函数确定在哪个矩形鼠标hover
  • 步骤4:将search区域缩小到该矩形,然后从步骤2开始重复。

这样你就需要重复这些步骤最多11次,考虑到你的屏幕不比2048px宽。

所以你会生成最大11 x 4 = 44 <a>元素。

如果你不需要确定一个像素的鼠标位置,但是说10px精度是可以的。 您最多可以重复8次,所以您需要绘制最多8 x 4 = 32个元素。

由于DOM通常很慢,因此也不会执行生成并销毁<a>元素。 相反,您可以重复使用最初的4个<a>元素,并在循环步骤时调整它们的topleftwidthheight

现在,创build4 <a>也是一个矫枉过正的事情。 相反,您可以在每个矩形中testinggetComputedStyle()时重用相同的<a>元素。 因此,不要将search区域拆分为2 x 2 <a>元素,而是通过使用topleft样式属性移动它来重用单个元素。

因此,所有你需要的是一个单独的元素改变它的widthheight最多11次,改变它的top和最高最多44次,你将有确切的鼠标位置。

我实现了一个水平/垂直search,(首先制作一个水平排列的垂直线链接的div,然后使垂直排列的水平线链接充满div,并简单地看看哪一个具有hover状态),就像Tim Down的想法一样,它工作得很快。 可惜的是,在KDE上的Chrome 32无法正常工作。

jsfiddle.net/5XzeE/4/

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

您不必移动鼠标来获取光标的位置。 该位置也是鼠标移动以外的事件报告。 以下是点击事件

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