CODEWITHSUNDEEP
javascriptjqueryjquery-events
Luke
Luke

Reputation: 5971

How do I handle these events and why is my code not working?

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:

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

Upvotes: 0

Views: 49

Answers (3)

James Allardice
James Allardice

Reputation: 165971

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).

Upvotes: 1

Tim Rogers
Tim Rogers

Reputation: 21713

Every time there is a mousedown event, you add a mousemove handler, and every time the mouse moves, you add another mouseup handler. I can't see where the stopIt variable is declared so the scope of this variable may also be an issue. You don't need to nest the handlers, so try it this way.

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

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816374

Don't attach the event handlers inside the event handlers. On every mouse move you attach a new mouseup event handler. They don't get overridden, they get appended.

Use a "global" flag instead:

$(document).ready(function() {
    var coordhdl = new coordinateHandler(),
        recording = false;

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

Upvotes: 0

Related Questions