title: e.preventDefault() not bulletproof?
body: <p>I have asked a similar question but didn’t get a real satisfying answer, so I will try again here. When I use code like this:</p>
  
  <pre><code>$("#element")   .on( 'click', function() {
                      // do something
                  } )             
                  .on( 'touchstart', function(e) {
                      e.preventDefault();
                      // do the same thing but on touch device like iPad f.e.
                      // and more over PLEASE do not fire the click event also!
                  } );
  </code></pre>
  
  <p>I am expecting that the click event is never never never fired (because of the hierarchy with which browser should work through the events) but in fact when I touch the element let’s say 20 times, than one time the click event fires also. Why?</p>
  
  <p>And I also tried things like:</p>
  
  <pre><code>$("#element")   .on( 'click', function() {
                      // do something
                  } )             
                  .on( 'touchstart', function(e) {
                      e.preventDefault();
                      e.stopPropagation();
                      // do the same thing but on touch device like iPad f.e.
                      // and more over PLEASE do not fire the click event also!
                      return false;
                  } );
  </code></pre>
  
  <p>It seemed to be a little more solid but not bulletproof.
  So I had to do:</p>
  
  <pre><code> $("#element")  .on( 'click', function() {
                      if ( !touchdevice ) {
                          // do something
                      };
                  } )             
                  .on( 'touchstart', function(e) {
                      e.preventDefault();
                      e.stopPropagation();
                      // do the same thing but on touch device like iPad f.e.
                      // and more over PLEASE do not fire the click event also!
                      return false;
                  } );
  </code></pre>
  
  <p>which seems to work but is awfully silly, isn’t it? Anyone with ideas what is this about? Thanks!</p>
  
  <p>EDIT:
  So I really had to do something like:</p>
  
  <pre><code>var touched;
  $("#element")   .on( 'click', function() {
                      if ( !touched ) {
                          // do something
                      };
                  } )             
                  .on( 'touchstart', function(e) {
                      e.preventDefault();  // actual senseless here
                      e.stopPropagation(); // actual senseless here
                      touched = true;
                      // do the same thing but on touch device like iPad f.e.
                      // and more over PLEASE do not fire the click event also!
                      return false;        // actual senseless here
                  } );
  </code></pre>
  
  <p>Come on guys! There must be a safe common way to use touchstart and click events on the same element ensuring that the click event is not fired (twice) to handle both touch sensible and regular browsers (or even the new combined ones). How would you do it?</p>