如何获得没有事件的鼠标位置(不移动鼠标)?
没有任何鼠标移动事件(不移动鼠标),是否可以在页面加载后使用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。 所以你可以用光标检查用户是否在你的页面上。
你可以做的是为游标的x
和y
坐标创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>
元素,并在循环步骤时调整它们的top
, left
, width
和height
。
现在,创build4 <a>
也是一个矫枉过正的事情。 相反,您可以在每个矩形中testinggetComputedStyle()
时重用相同的<a>
元素。 因此,不要将search区域拆分为2 x 2 <a>
元素,而是通过使用top
和left
样式属性移动它来重用单个元素。
因此,所有你需要的是一个单独的元素改变它的width
和height
最多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); });