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));
这里是例子
