CODEWITHSUNDEEP
javascriptjquery
user1469270
user1469270

Reputation:

.mouseup() and .mousedown() not working with .mousemove()

For some reason, my .mouseup() event is not being called. Ideally I'd like to console.log when the user activates mouseup().

Would anyone know what is wrong?

http://jsfiddle.net/cBh3B/

$('.circle').mousedown(function () {
    console.log('mousedone');
    $(document).mousemove(function (e) {
        console.log(e.pageY);
        $('.circle').offset({
            left: e.pageX,
            top: e.pageY
        });
    });
});

$('.circle').mouseup(function () {
    console.log('up');
});

var p = $('.square').position();
console.log(p.left);

Upvotes: 0

Views: 1059

Answers (2)

kockburn
kockburn

Reputation: 17606

EDIT: If your element is actually a 'circle' then your problem will most likely be the one evoked by @Peter Olson.

I recommend you try using 

$('.example').on('mouseup', function(){ console.log('mouseup'); });

Here is an example: http://jsfiddle.net/Grimbode/qsE56/

Seems this way your events are being called.

$('.circle').on('mousedown',function () {
    console.log('mousedone');
    $(document).on('mousemove', function (e) {
        console.log(e.pageY);
        $('.circle').offset({
            left: e.pageX,
            top: e.pageY
        });
    });
});

$('.circle').on('mouseup', function () {
    console.log('up');
});

var p = $('.square').position();
console.log(p.left);

You can also check the log, there is a clear 'up' written on it.

Upvotes: 1

Peter Olson
Peter Olson

Reputation: 142911

You are moving the circle away from the cursor once the mousedown event is triggered. By the time the mouse button is moved up, the cursor is no longer over the circle, which means that the $('.circle').mouseup event will not be called.

If you keep the circle under the mouse then the mouseup event will be captured. (See this jsFiddle demo.)

Upvotes: 2

Related Questions