title: iPhone/Android browser occasionally follows link href instead of jQuery onclick event
body: <p>I have a mobile web gallery page where I have a CSS floated "next" link.  The CSS float property causes the link to have a display: block behavior on it.  A jQuery touchstart event is bound to the link.  When the user clicks on the link, the Javascript code bound to that touchstart event advances the gallery by one slide via Ajax. In other words, there is no page refresh.</p>
  
  <p>However, I noticed that occasionally when I touch an area of the link's block space that is not the link text itself, the browser follows the href and causes a page refresh (because the URL has changed) instead of executing the Javascript code bound to the touchstart event.</p>
  
  <p>Has anybody seen this before?  Is there a way to fix this?</p>
  
  <p>I simplified it down to this code below, and it still happens, although much less frequently.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
     &lt;html&gt;
     &lt;head&gt;
          &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /&gt;
          &lt;title&gt;Test&lt;/title&gt;
  
          &lt;script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'&gt;&lt;/script&gt;
  
          &lt;style type='text/css'&gt;
              .cont { width: 320px; }
              .next { border-left: 1px solid #000; float: right; text-align: right; width: 65px; }
              .msg { clear: both; width: 200px; }
          &lt;/style&gt;
  
          &lt;script type='text/javascript'&gt;//&lt;![CDATA[ 
              $(function(){
                  $('.next').bind('click touchstart', function(event) {
                      event.preventDefault();  
                      if (event.type == 'touchstart') {
                          $(this).unbind('click');
                      }                
                      $('.msg').append('&lt;p&gt;Click!&lt;/p&gt;');                
                  });
              });//]]&gt;  
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="cont"&gt;&lt;a href="http://www.yahoo.com" class="next"&gt;Next&lt;/a&gt;&lt;/div&gt;
          &lt;div class="msg"&gt;&lt;/div&gt;
      &lt;/body&gt;    
  &lt;/html&gt;
  </code></pre>