我希望每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>
event在mousemove事件处理程序接收到的对象上报告鼠标的位置,您可以将其附加到窗口(事件冒泡):
event
mousemove
(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 } })();
(请注意,它的主体if只能在旧版IE上运行。)
if
以上示例的实际操作在将鼠标拖动到页面上方时会绘制点。(在IE8,IE11,Firefox30,Chrome38上进行了测试。)
如果您确实需要基于计时器的解决方案,请将其与一些状态变量结合使用:
(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 } } })();
据我所知,如果没有看到事件,就无法获得鼠标的位置,对此另一个堆栈溢出问题的回答似乎可以证实这一点。
旁注 :如果您打算每100毫秒(10次/秒)执行某项操作,请尝试使该功能中执行的实际处理 非常非常有限 。对于浏览器,这是很多工作,尤其是较旧的Microsoft。是的,在现代计算机上,它看起来不多,但是浏览器中却有很多事情……因此,例如,您可以跟踪上一个处理的位置,如果位置不正确,则可以立即从处理程序中保释。改变了。