Welcome To Ask or Share your Answers For Others

javascript - Javascript - 跟踪鼠标位置(Javascript - Track mouse position)

asked Mar 6, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - Javascript - 跟踪鼠标位置(Javascript - Track mouse position)

I am hoping to track the position of the mouse cursor, periodically every t mseconds.(我希望每隔t毫秒定期跟踪鼠标光标的位置。)

So essentially, when a page loads - this tracker should start and for (say) every 100 ms, I should get the new value of posX and posY and print it out in the form.(基本上，当一个页面加载时 - 这个跟踪器应该开始，并且（例如）每100毫秒，我应该获得posX和posY的新值并在表单中打印出来。) I tried the following code - but the values do not get refreshed - only the initial values of posX and posY show up in the form boxes.(我尝试了以下代码 - 但值不会刷新 - 只有posX和posY的初始值显示在表单框中。) Any ideas on how I can get this up and running ?(关于如何启动和运行的任何想法？) <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> ask by Hari translate from so

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

Welcome To Ask or Share your Answers For Others

1 Answer

answered Mar 6, 2021 by 深蓝 (71.8m points)

The mouse's position is reported on the event object received by a handler for the mousemove event, which you can attach to the window (the event bubbles):(在mousemove事件的处理程序接收的event对象上报告鼠标的位置，您可以将其附加到窗口（事件气泡）：)

(function() { document.onmousemove = handleMouseMove; function handleMouseMove(event) { var eventDoc, doc, body; 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 } })(); (Note that the body of that if will only run on old IE.)(（注意， if的主体只会在旧的IE上运行。）) Example of the above in action - it draws dots as you drag your mouse over the page.(上面的实例示例 - 当您将鼠标拖到页面上时，它会绘制点。) (Tested on IE8, IE11, Firefox 30, Chrome 38.)(（在IE8，IE11，Firefox 30，Chrome 38上测试过。）) If you really need a timer-based solution, you combine this with some state variables:(如果您确实需要基于计时器的解决方案，请将其与一些状态变量结合使用：) (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 } } })(); As far as I'm aware, you can't get the mouse position without having seen an event, something which this answer to another Stack Overflow question seems to confirm.(据我所知，你不能在没有看到事件的情况下获得鼠标位置，这对另一个Stack Overflow问题的答案似乎证实了这一点。) Side note : If you're going to do something every 100ms (10 times/second), try to keep the actual processing you do in that function very, very limited .(旁注：如果你要每100毫秒（10次/秒）做一些事情，尽量保持你在该功能中的实际处理非常非常有限 。) That's a lot of work for the browser, particularly older Microsoft ones.(这对于浏览器来说是很多工作，尤其是较旧的Microsoft浏览器。) Yes, on modern computers it doesn't seem like much, but there is a lot going on in browsers... So for example, you might keep track of the last position you processed and bail from the handler immediately if the position hasn't changed.(是的，在现代计算机上看起来并不多，但浏览器中有很多...例如，如果位置没有，你可以跟踪你处理的最后一个位置并立即从处理程序保释改变了。)

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

...