Javascript – 跟踪鼠标位置

我希望跟踪鼠标光标的位置,周期性地每t毫秒。 所以本质上,当一个页面加载 – 这个跟踪器应该开始,并说(每隔100毫秒),我应该得到posX和posY的新值,并打印出来的形式。

我尝试了下面的代码 – 但值不刷新 – 只有posX和posY的初始值显示在窗体框中。 任何想法,我怎么能得到这个启动和运行?

<html> <head> <title> Track Mouse </title> <script type="text/javascript"> function mouse_position() { var e = window.event; var posX = e.clientX; var posY = e.clientY; document.Form1.posx.value = posX; document.Form1.posy.value = posY; var t = setTimeout(mouse_position,100); } </script> </head> <body onload="mouse_position()"> <form name="Form1"> POSX: <input type="text" name="posx"><br> POSY: <input type="text" name="posy"><br> </form> </body> </html> 

mousemove事件处理程序接收的event对象上报告鼠标的位置,您可以将其附加到窗口(事件气泡):

 (function() { document.onmousemove = handleMouseMove; function handleMouseMove(event) { var dot, eventDoc, doc, body, pageX, pageY; event = event || window.event; // IE-ism // If pageX/Y aren't available and clientX/Y are, // calculate pageX/Y - logic taken from jQuery. // (This is to support old IE) if (event.pageX == null && event.clientX != null) { eventDoc = (event.target && event.target.ownerDocument) || document; doc = eventDoc.documentElement; body = eventDoc.body; event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0); event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0 ); } // Use event.pageX / event.pageY here } })(); 

(请注意, if只能在旧的IE上运行的if )。

上述的例子 – 当你在页面上拖动你的鼠标时,它会画点。 (测试IE8,IE11,Firefox 30,Chrome 38)

如果你真的需要一个基于定时器的解决方案,你可以将它和一些状态变量结合起来

 (function() { var mousePos; document.onmousemove = handleMouseMove; setInterval(getMousePosition, 100); // setInterval repeats every X ms function handleMouseMove(event) { var dot, eventDoc, doc, body, pageX, pageY; event = event || window.event; // IE-ism // If pageX/Y aren't available and clientX/Y are, // calculate pageX/Y - logic taken from jQuery. // (This is to support old IE) if (event.pageX == null && event.clientX != null) { eventDoc = (event.target && event.target.ownerDocument) || document; doc = eventDoc.documentElement; body = eventDoc.body; event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0); event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0 ); } mousePos = { x: event.pageX, y: event.pageY }; } function getMousePosition() { var pos = mousePos; if (!pos) { // We haven't seen any movement yet } else { // Use pos.x and pos.y } } })(); 

据我所知,你不能没有看到一个事件得到鼠标的位置, 这个答案似乎证实了另一个堆栈溢出问题 。

注意 :如果你要每100ms(10次/秒)做一些事情,尽量保持你在这个功能中的实际处理非常有限 。 对于浏览器来说,这是很多工作,特别是较老的Microsoft。 是的,在现代计算机上看起来并不多,但是浏览器中还是有很多…所以,例如,如果你的位置不是很好,那么你可以跟踪你处理的最后一个位置,改变了。

下面是一个解决方案,基于jQuery和一个鼠标事件监听器(这比正常的轮询要好得多):

 $("body").mousemove(function(e) { document.Form1.posx.value = e.pageX; document.Form1.posy.value = e.pageY; }) 
 onmousemove = function(e){console.log("mouse location:", e.clientX, e.clientY)} 

打开您的控制台(Ctrl + Shift + J),复制粘贴上面的代码,并在浏览器窗口上移动鼠标。

我相信我们正在反思这个,

 function mouse_position(e) { //do stuff } 
 <body onmousemove="mouse_position(event)"></body> 

我认为他只想知道光标的X / Y位置,而不是为什么答案是复杂的。

 // Getting 'Info' div in js hands var info = document.getElementById('info'); // Creating function that will tell the position of cursor // PageX and PageY will getting position values and show them in P function tellPos(p){ info.innerHTML = 'Position X : ' + p.pageX + '<br />Position Y : ' + p.pageY; } addEventListener('mousemove', tellPos, false); 
 * { padding: 0: margin: 0; /*transition: 0.2s all ease;*/ } #info { position: absolute; top: 10px; right: 10px; background-color: black; color: white; padding: 25px 50px; } 
 <!DOCTYPE html> <html> <body> <div id='info'></div> </body> </html> 

不管浏览器如何,下面的代码都能帮我获取正确的鼠标位置。

event.clientX - event.currentTarget.getBoundingClientRect().left event.clientY - event.currentTarget.getBoundingClientRect().top

基于ES6的代码:

 let handleMousemove = (event) => { console.log(`mouse position: ${event.x}:${event.y}`); }; document.addEventListener('mousemove', handleMousemove); 

如果您需要为mousemoving节流,请使用以下命令:

 let handleMousemove = (event) => { console.warn(`${event.x}:${event.y}\n`); }; let throttle = (func, delay) => { let prev = Date.now() - delay; return (...args) => { let current = Date.now(); if (current - prev >= delay) { prev = current; func.apply(null, args); } } } }; // let's handle mousemoving every 500ms only document.addEventListener('mousemove', throttle(handleMousemove, 500)); 

这里是例子