title: click and hold to scroll, touchstart, touchmove, touchend
body: <p>I have a scrollable div. I want people to be able to scroll the list through 'hold', and also select a button for click.</p>
  
  <p>The problem is that when a button is held in order to scroll the div, it is triggering the click function.</p>
  
  <p>I want that do not trigger when scrolling. I need some way to differentiate click of the hold function.</p>
  
  <p>So I'm using:</p>
  
  <pre><code>$('.panel').bind("touchstart mousedown", function (e) {
  console.log(e.type);
  $(this).addClass('resize');
  
  }).bind("touchmove mousemove", function (e) {
  $(this).removeClass('resize');
  
  }).bind("touchend mouseup", function (e) {
  $(this).removeClass('resize');
  $('.panel').addClass('flip');
  });
  </code></pre>
  
  <p>I thought the following solution.</p>
  
  <p>When <code>'.panel'</code> is <code>mousedown</code> for more than <code>500 ms</code>, the button activates, pressed:</p>
  
  <pre><code>$(this).addClass('resize');
  </code></pre>
  
  <p>When <code>'.panel'</code> is <code>mouseup</code>, the button returns to its normal state and then all the buttons make the movement of output:</p>
  
  <pre><code>$(this).removeClass('resize');
   $('.panel').addClass('flip');
  </code></pre>
  
  <p>BUT if the user <code>mousemove</code>, the <code>mousedown</code> and <code>mouseup</code> actions are canceled.</p>
  
  <p>just do not know how to put this into practice</p>
  
  <p>is something similar to that:
  <a href="http://m.microsoft.com/windowsphone/en-us/demo/default.aspx" rel="nofollow">http://m.microsoft.com/windowsphone/en-us/demo/default.aspx</a></p>
  
  <p>Please Suggest.</p>