问题描述:

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

网友答案:

What 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.com/owifu3/

http://docs.jquery.com/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.com/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.com/library/blmousepos.htm

http://hartshorne.ca/2006/01/23/javascript_cursor_position/

相关阅读:
Top