jQuery mouseup not being fired when mousemove on image

Question

When you mousedown on an image, move the mouse (mousemove) a little bit and then release (mouseup), mouseup is not fired with jQuery.

jsfiddle: http://jsfiddle.net/kVFTZ/

Why is this? How can I make it work when moving on an image?

Answer 1

Easy enough to fix. Add event.preventDefault(); to your mousedown function.

jsFiddle example

$(document).on('mousedown', function(event) {
    event.preventDefault();
    $('#info').text('Now move the mouse and then release');
    $('#log').text('mouse down fired');
}).on('mouseup', function() {
    $('#log').text('mouse up fired');
});

​

Answer 2

Well, I found that return false solves the problem more appropriately.

As long as e.preventDefault() is called, text selection will be prevented too (probably some other actions), and it can not be undone.

I added return false to mousedown on images only

if(e.target.tagName.toLowerCase() == 'img') {

    return false;

    // e.preventDefault() also does the job
    // but it prevents all default action
    // and can not be undone
}

updated fiddle: http://jsfiddle.net/kVFTZ/4/