title: jQuery click event not working when mouse moves from one div to another with button held down
body: <p>I've made a page that uses jQuery to allow you to place <code>&lt;div&gt;</code>s on the page based on your mouse coordinates when you click.</p>
  <p><a href="http://acorn.host22.com/tiles.html" rel="nofollow noreferrer"><strong>The page</strong></a></p>
  <p>And here's the javascript:</p>
  <pre><code>$('document').ready(function() {
      $(&quot;#canvas&quot;).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');
      });
  });
  </code></pre>
  <p>I've found that if you mousedown in the <code>div#canvas</code> and mouseup with your pointer over a placed <code>&lt;div&gt;</code> (or vice versa) then a new <code>&lt;div&gt;</code> doesn't get placed. Why is this?</p>
  <p><strong>EDIT:</strong></p>
  <p>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 <code>div.tile</code> elements (the pink rectangles) and register in the <code>div#canvas</code> element to create the click event?</p>