title: Understanding touch events
body: <p>I'm trying to make some of my libraries work with touch devices, but I'm having a hard time trying to figure out how they're supported and how they work.</p>
  
  <p>Basically, there are <a href="https://developer.mozilla.org/en-US/docs/DOM/Touch_events" rel="noreferrer">5 touch events</a>, but it seems there's consensus among mobile browsers only on the <code>touchstart</code> event (duh). I've created a <a href="http://jsfiddle.net/cpUsA/4/" rel="noreferrer">fiddle</a> as a test case.</p>
  
  <p>I've tested this on my Galaxy Note with Android 4 on board, but you can check the link with a desktop browser too.</p>
  
  <p>The goal is to try to figure out how to handle taps, double taps and long taps. Nothing fancy.</p>
  
  <p>Basically, this is what happens:</p>
  
  <p>The <strong>Android stock browser</strong> doesn't fire touch events. It just tries to emulate mouse clicks with taps, firing <code>mousedown</code>, <code>mouseup</code> and <code>click</code> events consecutively, but double taps just zoom in and out tha page.</p>
  
  <p><strong>Chrome</strong> for Android fires the touchstart event when the finger touches the screen. If it's released soon enough, it fires then <code>mousedown</code>, <code>mouseup</code>, <code>touchend</code> and finally <code>click</code> events.</p>
  
  <p>In case of <em>long tap</em>, after about half a second it fires <code>mousedown</code> and <code>mouseup</code>, and <code>touchend</code> when the finger is lifted, with no <code>click</code> event at the end.</p>
  
  <p>If you <em>move your finger</em>, it fires a <code>touchmove</code> event a couple of times, then it fires a <code>touchcancel</code> event, and nothing happens afterwards, not even a <code>touchend</code> event when lifting the finger.</p>
  
  <p>A <em>double tap</em> triggers the zoom in/out features, but event-wise it fires the combo <code>touchstart</code>-<code>touchevent</code> twice, with no mouse events fired.</p>
  
  <p><strong>Firefox</strong> for Android correctly fires the <code>touchstart</code> event, and in case of short tap fires <code>mousedown</code>, <code>mouseup</code>, <code>touchend</code> and <code>click</code> afterwards.</p>
  
  <p>In case of <em>long tap</em>, it fires <code>mousedown</code>, <code>mouseup</code> and finally <code>touchend</code> events. It's the same of Chrome for these things.</p>
  
  <p>But if you <em>move your finger</em>, if fires <code>touchmove</code> continously (as one may expect) but it doesn <em>not</em> fire the <code>touchleave</code> event when the finger leaves the element with the event listener, and doesn't fire the <code>touchcancel</code> event when the finger gets out of the browser viewport.</p>
  
  <p>For <em>double taps</em>, it behaves just like Chrome.</p>
  
  <p><strong>Opera Mobile</strong> does the same thing of Chrome and Firefox for a short tap, but in case of long press activates some sort of sharing feature that I really want to disable. If you move your finger, or double tap, it behaves just like Firefox.</p>
  
  <p><strong>Chrome beta</strong> does the usual for short taps, but in case of long taps it doesn't fire the <code>mouseup</code> event anymore, just <code>touchstart</code>, then <code>mousedown</code> after half a second, then <code>touchend</code> when the finger is lifted. When the finger is moved, now it behaves like Firefox and Opera Mobile.</p>
  
  <p>In case of <em>double taps</em>, it doesn't fire touch events <em>when zooming out</em>, but only when zooming in.</p>
  
  <p>Chrome beta shows the oddest behaviour, but I can't really complain since it's a beta.</p>
  
  <p><strong>The question is</strong>: is there a simple and way to try to detect short taps, long taps and double taps in the most common browsers of touch devices?</p>
  
  <p>Too bad I can't test it on iOS devices with Safari, or IE for Windows Phone 7/Phone 8/RT, but if some of you can, your feedback would be very appreciated.</p>