title: Determine and bind click or "touch" event
body: <p>I'm using the below code to bind &quot;click&quot; or &quot;touchstart&quot; events (using jQuery's <a href="http://api.jquery.com/on/" rel="noreferrer"><code>on(eventType, function() { ... })</code></a>).</p>
  <pre><code>var what = (navigator.userAgent.match(/iPad/i)) ? 'touchstart' : 'click';
  </code></pre>
  <p>Later on:</p>
  <pre><code>$foo.on(what, function() { ... });
  </code></pre>
  <p>... which works great for iPad and &quot;everything else&quot;, but I'm concerned that the above code has &quot;iPad tunnel vision&quot;...</p>
  <p><strong>My question(s):</strong></p>
  <p>Do all other devices (for example, Android tablets) have similarly named &quot;touchstart&quot; events? If so, how can I improve the above code so that I can account for those event types?</p>
  <p>In other words, how can I account for a wider range of touch devices in above code (not just iPad)?</p>
  <hr />
  <h1>EDIT #1</h1>
  <p>What do you folks think about this:</p>
  <pre><code>var foo = ('ontouchstart' in window) ? 'touchstart' : ((window.DocumentTouch &amp;&amp; document instanceof DocumentTouch) ? 'tap' : 'click');
  </code></pre>
  <p>Note: Most of the above logic is <a href="https://github.com/Modernizr/Modernizr/blob/master/modernizr.js#L420-446" rel="noreferrer">from Modernizr here</a>.</p>
  <p>The above appears to work for Firefox/iPad... I don't have much else to test on at this time.</p>
  <p>What I like about the above is that I'm not UA sniffing. :)</p>
  <p>Is <code>tap</code> a good default for all other touch devices?</p>
  <hr />
  <h1>EDIT #2</h1>
  <p>Some <a href="https://github.com/jquery/jquery-mobile/issues/854" rel="noreferrer">interesting information here</a>, which links to this:</p>
  <p><a href="https://developers.google.com/mobile/articles/fast_buttons" rel="noreferrer">Creating Fast Buttons for Mobile Web Applications</a></p>
  <p>Not a direct answer really, but gives a lot of details of the situation devs face when facing click-related events for multiple platforms and devices.</p>
  <hr />
  <h1>EDIT #3</h1>
  <p>Some <a href="http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html" rel="noreferrer">good info here</a> too:</p>
  <blockquote>
  <h2>Android and iPhone touch events</h2>
  <p>Android and iPhone versions of WebKit have some touch events in common:</p>
  <pre><code>touchstart - triggered when a touch is initiated. Mouse equivalent - mouseDown
  touchmove - triggered when a touch moves. Mouse equivalent - mouseMove
  touchend - triggered when a touch ends. Mouse equivalent - mouseUp. This one is a bit special on the iPhone - see below
  touchcancel - bit of a mystery
  </code></pre>
  </blockquote>
  <p>After reading that, I think I'll change the code above to this:</p>
  <pre><code>var foo = (('ontouchstart' in window) || (window.DocumentTouch &amp;&amp; document instanceof DocumentTouch)) ? 'touchstart' : 'click';
  </code></pre>
  <p>When I first asked my question - not having access to anything other than an iPad/iPhone - I assumed <code>touchstart</code> was an iOS-specific event; it now looks like <code>touchstart</code> and <code>click</code> will cover most, if not all, of the bases for touch devices.</p>
  <hr />
  <h1>August 2014 update:</h1>
  <p>If it's of any help, I've posted some utility classes here:</p>
  <ul>
  <li><p><a href="https://gist.github.com/mhulse/4704893" rel="noreferrer">mhulse / no-x.js</a>:</p>
  <blockquote>
  <p>[no-js] [no-touch] JavaScript utilities to put in  of HTML templates that will add <code>js</code> or <code>touch</code> classes for use in CSS and/or JS.</p>
  </blockquote>
  </li>
  </ul>