Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
373 views
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 Reply

0 votes
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.(是的,在现代计算机上看起来并不多,但浏览器中有很多...例如,如果位置没有,你可以跟踪你处理的最后一个位置并立即从处理程序保释改变了。)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...