title: Stopping propagation of mousedown/mouseup from a click handler
body: <p><strong><a href="http://jsfiddle.net/6gw4x">Here's a DEMO</a></strong>.</p>
  
  <p>I have two <code>divs</code>, an inner and an outer:</p>
  
  <pre><code>&lt;div id="outer"&gt;
      &lt;div id="inner"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With some CSS so you can see which is which:</p>
  
  <pre><code>#outer {
      width: 250px;
      height: 250px;
      padding: 50px;
      background: yellow;
  }
  
  #inner {
      width: 250px;
      height: 250px;
      background: blue;
  }
  </code></pre>
  
  <p>I try to stop propagation of <code>mousedown</code> and <code>mouseup</code> events from within a <code>click</code> handler like so:</p>
  
  <pre><code>$('#inner').on('click', function(e) {
      e.stopPropagation();
      $(this).css({'background': 'green'});
      return false;
  });
  
  $('#outer').on('mousedown', function(e) {
      $(this).css({'background': 'green'});
  });
  
  $('#outer').on('mouseup', function(e) {
      $(this).css({'background': 'yellow'});
  });
  </code></pre>
  
  <p>This doesn't seem possible. What does work is calling <code>.stopPropagation</code> from within other <code>mousedown</code> and <code>mouseup</code> calls, as shown here <strong>(<a href="http://jsfiddle.net/6gw4x/1/">another DEMO)</a></strong>:</p>
  
  <pre><code>$('#inner').on('mousedown', function(e) {
      e.stopPropagation();
      return false;
  });
  
  $('#inner').on('mouseup', function(e) {
      e.stopPropagation();
      return false;
  });
  </code></pre>
  
  <p>I may have already answered my own question, but I'm not sure if my approach is the best or most reasonable. Is this the right way to stop an event bubbling up to a <code>mousedown</code> and <code>mouseup</code>?</p>