title: jquery prevent mouseup if mousemove has previously been called
body: <p>I have a <code>div</code> containing a number of <code>span</code> buttons displayed horizontally. There are too many buttons to fit on the screen so I want the user to be able to click and drag the whole row of buttons. However, I don't want the button's <code>mouseup</code> event to fire if the row has been dragged.</p>
  
  <p>The <code>holder</code> only contains <code>button</code> elements. Here is the ASCII representation:</p>
  
  <pre><code>-------------------------------
  | btn | btn | btn | btn | btn |
  -------------------------------
  </code></pre>
  
  <p>Below is the code setup. Currently the <code>mouseup</code> handler on the button is being called before the handler on the holder (handlers being called in the bubbling phase), so calling <code>event.preventPropagation()</code> in the holder's <code>mouseup</code> handler doesn't help.</p>
  
  <pre><code>&lt;div id="holder"&gt;
      &lt;span class="button"&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  $('#holder').mousedown( function () {
      $(document).mousemove( function () {
          // scroll content of #holder
      } ).mouseup( function () {
          // stop scrolling
          $(document).unbind('mouseup').unbind('mousemove');
      } );
  } );
  
  $('.button').mouseup( function () {
      $('document').mousemove( function () {
          // do some action here, but only if holder hasn't scrolled on mousedown
      } );
  } );
  </code></pre>
  
  <p>Any ideas?</p>