jQuery click event not working when mouse moves from one div to another with button held down

Programmer Question

I've made a page that uses jQuery to allow you to place <div>s on the page based on your mouse coordinates when you click.

The page

And here's the javascript:

$('document').ready(function() {
    $("#canvas").click(function(e){
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    $(document.createElement('div')).css({'left':x + 'px', 'top':y + 'px'}).addClass('tile').appendTo('#canvas');
    });
});

I've found that if you mousedown in the div#canvas and mouseup with your pointer over a placed <div> (or vice versa) then a new <div> doesn't get placed. Why is this?

EDIT:

Ok, so the problem is that the mouse-up and mouse-down events are registering in different elements so it doesn't make a click event. So how do I get my mouse-up part of the click ignore the div.tile elements (the pink rectangles) and register in the div#canvas element to create the click event?

Find the answer here