是否有可能获得鼠标位置与JavaScript页面加载后,没有任何鼠标移动事件(不移动鼠标)?


当前回答

编辑2020:这不再工作。看起来是这样,浏览器供应商修补了这个问题。因为大多数浏览器都依赖于chromium,所以它可能位于浏览器的核心。

旧的回答: 您还可以钩子mouseenter(当mousecursor在页面内时,该事件在页面重新加载后触发)。扩展损坏的代码应该做的伎俩:

Var x = null; Var y = null; 文档。addEventListener(' mouemove ', onMouseUpdate, false); 文档。addEventListener('mouseenter', onMouseUpdate, false); 函数onMouseUpdate(e) { x = e.pageX; y = e.pageY; console.log (x, y); } 函数getMouseX() { 返回x; } 函数getMouseY() { 返回y; }

你也可以在mouseleave-event上设置x和y为空。你可以用光标检查用户是否在你的页面上。

其他回答

编辑2020:这不再工作。看起来是这样,浏览器供应商修补了这个问题。因为大多数浏览器都依赖于chromium,所以它可能位于浏览器的核心。

旧的回答: 您还可以钩子mouseenter(当mousecursor在页面内时,该事件在页面重新加载后触发)。扩展损坏的代码应该做的伎俩:

Var x = null; Var y = null; 文档。addEventListener(' mouemove ', onMouseUpdate, false); 文档。addEventListener('mouseenter', onMouseUpdate, false); 函数onMouseUpdate(e) { x = e.pageX; y = e.pageY; console.log (x, y); } 函数getMouseX() { 返回x; } 函数getMouseY() { 返回y; }

你也可以在mouseleave-event上设置x和y为空。你可以用光标检查用户是否在你的页面上。

不是鼠标位置,但是,如果你正在寻找当前光标位置(用例,如获取最后键入的字符等),那么,下面的代码片段工作良好。 这将为您提供与文本内容相关的游标索引。

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

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

简单地使用动画帧或一个时间间隔的函数。你仍然需要一个鼠标事件一次,虽然只是启动,但技术上你可以把它放在任何你喜欢的地方。

从本质上讲,我们一直在跟踪一个虚拟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);
}  

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

OK, I have just thought of a way. Overlay your page with a div that covers the whole document. Inside that, create (say) 2,000 x 2,000 <a> elements (so that the :hover pseudo-class will work in IE 6, see), each 1 pixel in size. Create a CSS :hover rule for those <a> elements that changes a property (let's say font-family). In your load handler, cycle through each of the 4 million <a> elements, checking currentStyle / getComputedStyle() until you find the one with the hover font. Extrapolate back from this element to get the co-ordinates within the document.

N.b.,别这样。

如果你渲染2000 x 2000 <a>个元素,@Tim Down的答案是不性能的:

OK, I have just thought of a way. Overlay your page with a div that covers the whole document. Inside that, create (say) 2,000 x 2,000 elements (so that the :hover pseudo-class will work in IE 6, see), each 1 pixel in size. Create a CSS :hover rule for those elements that changes a property (let's say font-family). In your load handler, cycle through each of the 4 million elements, checking currentStyle / getComputedStyle() until you find the one with the hover font. Extrapolate back from this element to get the co-ordinates within the document. N.B. DON'T DO THIS.

但是你不需要一次呈现400万个元素,而是使用二分搜索。只需使用4 <a>元素即可:

第一步:考虑整个屏幕作为开始搜索区域 步骤2:将搜索区域分割成2 × 2 = 4个矩形<a>个元素 步骤3:使用getComputedStyle()函数确定鼠标悬停在哪个矩形中 步骤4:将搜索区域缩小到该矩形,并重复步骤2。

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

所以你将生成最多11 x 4 = 44 <a>个元素。

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

生成并销毁<a>元素也不能执行,因为DOM通常很慢。相反,您可以重用初始的4 <a>元素,并在循环执行步骤时调整它们的顶部、左侧、宽度和高度。

现在,创建4 <a>也是多余的。相反,您可以在每个矩形中测试getComputedStyle()时重用相同的<a>元素。因此,不需要将搜索区域分割为2 × 2 <a>元素,只需要重复使用一个<a>元素,使用顶部和左侧样式属性移动它。

所以,所有你需要的是一个<a>元素改变它的宽度和高度最多11次,改变它的顶部和左侧最多44次,你就会有准确的鼠标位置。