.mouseup（）和.mousedown（）无法与.mousemove（）一起使用

Question

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

Answer 1

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

Answer 2

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.