Question

I need to do the following. As soon as the user clicks on a div, i want to save the mouse coordinations while the user is moving the cursor over the div and is holding the left mouse button. When the user leaves the div or releases the left button, i want to stop recording the coordinates. I’ve got the following code:

$(document).ready(function() {
            var coordhdl = new coordinateHandler();
            $("#test").mousedown(function(e) {

                $("#test").mousemove(function(ee) {
                    
                    $("#test").mouseup(function(e) {
                        stopIt = true;
                    });
                    if(stopIt == false)
                    {
                        coordhdl.addCords(ee.pageX - this.offsetLeft, ee.pageY - this.offsetTop);
                    }
                    
                
                });
    
            }); 
            
            
        });

The problems with this code are:

• It records coordinate even when the user only clicked the div without pressing the left button.
• It doesn’t stop recording the coordinates once it has been clicked.

I am new to Javascript/jQuery, so I don’t know very much about it.

Answer 1

Something like this should work. It sets a flag to true/false when the mouse is pressed/released respectively. When the mouse moves, if the flag is set, the coordinates are added:

$(document).ready(function() {
    var isDown = false,
        coordhdl = new coordinateHandler();
    $("#test").mousedown(function() {
       isDown = true;
    }).mouseup(function() {
       isDown = false;  
    }).mousemove(function(e) {
        if(isDown) {
            coordhdl.addCords(ee.pageX - this.offsetLeft, ee.pageY - this.offsetTop);
        }
    });
});

Here’s a demo of something similar in action (it simply writes the coordinates to a p element instead of using your coordinateHandler object).