我希望每隔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>
7 回答
我认为他只想知道光标的X / Y位置,而不是为什么答案那么复杂 .
打开控制台(Ctrl Shift J),复制粘贴上面的代码并在浏览器窗口上移动鼠标 .
这是一个基于jQuery和鼠标事件监听器(比常规轮询要好得多)的解决方案:
在
event
事件的处理程序收到event
对象上报告鼠标的位置,您可以将其附加到窗口(事件气泡):(注意
if
的主体只能在旧的IE上运行 . )Example of the above in action - 当您将鼠标拖到页面上时,它会绘制点 . (在IE8,IE11,Firefox 30,Chrome 38上测试过 . )
如果您确实需要基于计时器的解决方案,可以将其与一些状态变量结合使用:
至于我没有看到事件就获得鼠标位置,this answer to another Stack Overflow question似乎证实了这一点 .
Side note :如果你要每100毫秒(10次/秒)做一些事情,尽量保持你在该功能中的实际处理非常非常有限 . 那似乎很多,但是浏览器中有很多东西......例如,如果位置没有改变,你可以跟踪你处理的最后一个位置并立即从处理程序中保释 .
基于ES6的代码:
如果您需要限制鼠标移动,请使用以下命令:
这是example
我相信我们正在过度思考这个,
无论浏览器如何,下面的行都可以帮助我获取正确的鼠标位置 .
event.clientX - event.currentTarget.getBoundingClientRect().left event.clientY - event.currentTarget.getBoundingClientRect().top