Get mouse location during mouse down?

Question

How can I continuously get the position of the mouse whilst its button is being held down?

I know I can do:

<element onclick="functionName(event)"></element>
<script>
function functionName(e){
e.pageX
e.pageY
//do stuff
}
</script>

and I know you can use the onmousedown event, but how would I continuously get the position while the button is still held down?

Oddly I couldn't find this anywhere I looked.

Answer 1

Anyway, I'd suggest using mousemove event with check if which event property equals 1 (i.e. left mouse button pressed):

$("element").on("mousemove", function(e) {
    if (e.which == 1) {
        console.log(e.pageX + " / " + e.pageY);
    }
});​

DEMO: http://jsfiddle.net/HBZBQ/

Answer 2

Here is a JSFiddle for you. You need to store the state of the mouse button in a variable.

jQuery:

$(document).ready(function() {
    $(document).mousedown(function() {
        $(this).data('mousedown', true);
    });
    $(document).mouseup(function() {
        $(this).data('mousedown', false);
    });

    $(document).mousemove(function(e) {
        if($(this).data('mousedown')) {
            $('body').text('X: ' + e.pageX + ', Y: ' + e.pageY);
        }
    });
});​

Here, I'm storing the mouse button's up or down state in document using $(document).data(). I could have used a global variable, but storing it this way makes the code a little cleaner.

In your $.mousemove() function, only do what you want if the mouse is down. In the code above, I'm simply printing the mouse's position.