I need to record the mouse position every n seconds, but jQuery seems to only offer ways to retrieve the x and y position values when there is a mouse event. Can this be done with setInterval()?
EDIT - I'm thinking to set a setInterval() to increase a value every n seconds (say 'i'), and then on mousemove record the current i alongside the x and y values. There really should be an easier way than this though
I need to record the mouse position every n seconds, but jQuery seems to only offer ways to retrieve the x and y position values when there is a mouse event. Can this be done with setInterval()?
EDIT - I'm thinking to set a setInterval() to increase a value every n seconds (say 'i'), and then on mousemove record the current i alongside the x and y values. There really should be an easier way than this though
Share Improve this question asked Nov 2, 2011 at 15:48 VorikiVoriki 1,6573 gold badges20 silver badges45 bronze badges7 Answers
Reset to default 2What you can do is bind a function to the mousemove event on the document, and inside the function set a global variable with the mouse position. then every interval you can read the mouse position.
example:
$(document).ready(function () {
var mousePosition = {'x': 0, 'y': 0};
$(document).bind('mousemove', function(e) {
mousePosition = {'x': e.pageX, 'y': e.pageY};
});
setInterval(function () {
// do something with mousePosition
}, 1000);
});
This should help.
http://jsbin./owifu3/
http://docs.jquery./Tutorials:Mouse_Position
Might as well paste the code...
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$(document).mousemove(function(e){
$('#status').html(e.pageX +', '+ e.pageY);
});
})
</script>
<body>
<h2 id="status">
0, 0
</h2>
</body>
</html>
Here is a solution that doesnt use jQuery. Although I do prefer the jq option:
http://www.codelifter./main/javascript/capturemouseposition1.html
You could make usage of the .timeStamp property which is available in the event object:
var stored = 0;
$( document ).mousemove(function( event ) {
if( event.timeStamp - stored >= 2000 ) {
console.log('stored!');
stored = event.timeStamp;
}
});
Of course, that technique would only store data while moving the mouse. On idle time, nothing happens. If you also need idle position's you really need to go with an interval timer.
jQuery(document).ready(function(){
var myx, myy;
$(document).mousemove(function(e){
myx = e.pageX;
myy = e.pageY);
});
window.setInterval(function() {
$('#status').html('mouse position is '+myx+','+myy);
}, 1000);
});
I had to do something like that once, and I used this kind of a hacky solution:
document.onmousemove=function(){
x = e.pageX;
y = e.pageY;
}
setInterval(function(){
array.push(x+','+y);
},'1000');
The length of this array will be your i. You can get the individual terms using the split method.
Demo that just prints them to a div
Two solutions, neither of which uses Jquery:
http://javascript.about./library/blmousepos.htm
http://hartshorne.ca/2006/01/23/javascript_cursor_position/