title: Stop the touchstart performing too quick when scrolling
body: <p>I'm trying to figure out how to solve the tapped class being assigned to the elements when scrolling, but it's taking effect too quick which I need to delay it a bit when it's actually touched instead of touched while scrolling, this is my code of how it works:</p>
  
  <pre><code>$('div, a, span').filter('[tappable][data-tappable-role]').bind('touchstart', function()
  {
      var self = $(this);
  
      self.addClass(self.data('tappable-role'));
  }).bind('touchend', function()
  {
      var self = $(this);
      self.removeClass(self.data('tappable-role'));
  }).bind('click', function()
  {
      var self = $(this),
          goTo = self.data('goto');
  
      if(typeof goTo !== 'undefined')
      {
          window.location = goTo;
      }
  });
  </code></pre>
  
  <p>When scrolling, it will assign the class to the element when I've barely touched it, I want to prevent this from happening unless it's properly touched (not clicked). Although I tried experimenting with the setTimeout, but that doesn't work well as it delays but it will still assign the class later on.</p>
  
  <p>This is how I did it with the setTimeout:</p>
  
  <pre><code>var currentTapped;
  $('div, a, span').filter('[tappable][data-tappable-role]').bind('touchstart', function()
  {
      clearTimeout(currentTapped);
  
      var self = $(this);
  
      var currentTapped = setTimeout(function()
      {
          self.addClass(self.data('tappable-role'));
      }, 60);
  }).bind('touchend', function()
  {
      clearTimeout(currentTapped);
  
      var self = $(this);
      self.removeClass(self.data('tappable-role'));
  }).bind('click', function()
  {
      clearTimeout(currentTapped);
  
      var self = $(this),
          goTo = self.data('goto');
  
      if(typeof goTo !== 'undefined')
      {
          window.location = goTo;
      }
  });
  </code></pre>
  
  <p>How can I do this the effective way?</p>
  
  <ul>
  <li><a href="http://jsfiddle.net/pr7pF/" rel="noreferrer">Demo #1 (with setTimeout)</a>.</li>
  <li><a href="http://jsfiddle.net/PraXq/" rel="noreferrer">Demo #2 (with no setTimeout)</a></li>
  </ul>
  
  <p>You need to view it on your iPhone/iPod/iPad or an emulator to test the fiddle.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <pre><code>function nextEvent() 
  {
      $(this).on('touchend', function(e)
      {
          var self = $(this);
  
          self.addClass(self.data('tappable-role')).off('touchend');
      })
      .on('touchmove', function(e)
      {
          var self = $(this);
  
          self.removeClass(self.data('tappable-role')).off('touchend');
      })
      .click(function()
      {
          var self = $(this),
              goTo = self.data('goto');
  
          if(typeof goTo !== 'undefined')
          {
              window.location = goTo;
          }
      });
  }
  
  $('div, a, span').filter('[tappable][data-tappable-role]').on('touchstart', this, nextEvent);
  </code></pre>