$("#canvas").mousedown(function(e){
    var X1 = (e.pageX - this.offsetLeft) - 8;
    var Y1 = (e.pageY - this.offsetTop) - 8;
        
    $("#canvas").mouseup(function(e){
        var X2 = (e.pageX - this.offsetLeft) - 8;
        var Y2 = (e.pageY - this.offsetTop) - 8;
        alert(X1 + " " + X2 + " " Y1 + " " + Y2);
    });
});

The problem I'm having with this is that after the first time the function is called (the first time works fine, and as expected) the mouseup function seems to be called multiple time (i.e. multiple alerts will display instead of just the first). Is there a way to prevent this from happening, or a better way to code this?

Thanks

$("#canvas").mousedown(function(e){
    var X1 = (e.pageX - this.offsetLeft) - 8;
    var Y1 = (e.pageY - this.offsetTop) - 8;
        
    $("#canvas").mouseup(function(e){
        var X2 = (e.pageX - this.offsetLeft) - 8;
        var Y2 = (e.pageY - this.offsetTop) - 8;
        alert(X1 + " " + X2 + " " Y1 + " " + Y2);
    });
});

The problem I'm having with this is that after the first time the function is called (the first time works fine, and as expected) the mouseup function seems to be called multiple time (i.e. multiple alerts will display instead of just the first). Is there a way to prevent this from happening, or a better way to code this?

Thanks

• javascript
• jquery
• mouseevent

• My guess would be that you need to escape the function somehow. Maybe try adding a return to the bottom of the mouseup function. – Kevin Anthony Oppegaard Rose Commented Nov 21, 2011 at 17:20

6 Answers 6

Your code attaches a new mouseup handler to the #canvas element every time you move the mouse. Use .one() to attach the handler only once:

$(this).one('mouseup', function(e){
    var X2 = (e.pageX - this.offsetLeft) - 8;
    var Y2 = (e.pageY - this.offsetTop) - 8;
    alert(X1 + " " + X2 + " " Y1 + " " + Y2);
});

But a better solution would be to use a state variable (and proper scope):

var clicked = false;
var X1, Y1, X2, Y2;

$("#canvas").mousedown(function(e){
    X1 = (e.pageX - this.offsetLeft) - 8;
    Y1 = (e.pageY - this.offsetTop) - 8;

    clicked = true;
});


$("#canvas").mouseup(function(e){
    if (clicked) {
        X2 = (e.pageX - this.offsetLeft) - 8;
        Y2 = (e.pageY - this.offsetTop) - 8;
        alert(X1 + " " + X2 + " " Y1 + " " + Y2);

        clicked = false;
    }
});

that's because the mouseup event is bound every time mousedown event fires.
you can simply add $("#canvas").unbind('mouseup'); at the end of mouseup function.

$("#canvas").mousedown(function(e){
        var X1 = (e.pageX - this.offsetLeft) - 8;
        var Y1 = (e.pageY - this.offsetTop) - 8;

        $("#canvas").mouseup(function(e){
            var X2 = (e.pageX - this.offsetLeft) - 8;
            var Y2 = (e.pageY - this.offsetTop) - 8;
            alert(X1 + " " + X2 + " " Y1 + " " + Y2);
            $("#canvas").unbind('mouseup');
        });
});

This is because you register a new listener for mouseup everytime the mousedown is run. You should move the code for mouseup outside the mousedown function.

Regards
Tobias

The correct code is:

$("#canvas").mousedown(function(e){
    var X1 = (e.pageX - this.offsetLeft) - 8;
    var Y1 = (e.pageY - this.offsetTop) - 8;
}).mouseup(function(e){
    var X2 = (e.pageX - this.offsetLeft) - 8;
    var Y2 = (e.pageY - this.offsetTop) - 8;
    alert(X1 + " " + X2 + " " Y1 + " " + Y2);
});

You are rewritting the mouseup all the time you call mousedown.

EDIT

Sorry, keeping the things where you want:

$("#canvas").mousedown(function(e){
    var X1 = (e.pageX - this.offsetLeft) - 8;
    var Y1 = (e.pageY - this.offsetTop) - 8;

    $(this).mouseup(function(e){
        var X2 = (e.pageX - this.offsetLeft) - 8;
        var Y2 = (e.pageY - this.offsetTop) - 8;
        alert(X1 + " " + X2 + " " Y1 + " " + Y2);
        $(this).unbind("mouseup");
    });
});

We ended up using a bination of a few different answers here:

$("#canvas").mousedown(function(e){
    var X1 = (e.pageX - this.offsetLeft) - 8;
    var Y1 = (e.pageY - this.offsetTop) - 8;

    $(this).mouseup(function(e){
        var X2 = (e.pageX - this.offsetLeft) - 8;
        var Y2 = (e.pageY - this.offsetTop) - 8;
        alert(X1 + " " + X2 + " " + Y1 + " " + Y2);
        $(this).unbind("mouseup");
    });
    $(this).unbind("mousedown);
});

$(document).unbind('mouseup');