title: How do I handle (well, mock) hover behaviour on a touch device?
body: <p>I’m looking to fix an issue a site is having on touch devices. On desktop, there’s a row of navigation links and on hover each of these drop their own flyout. On touch devices, however, there’s no hover event so I’m looking for the best way to mock this.</p>
  
  <p>The behaviour I’m looking to achieve on a touch device is as follows:</p>
  
  <ul>
  <li>The user taps once on a menu item and the flyout is shown</li>
  <li>The user can then tap a link from the flyout if they desire or</li>
  <li>The user can tap the menu item again and follow the link to that page</li>
  <li>The user can tap anywhere else on the page (or scroll) and the flyout will close</li>
  </ul>
  
  <p>I initially tried using something like:</p>
  
  <pre><code>$('nav-item').on(‘touchstart’, function() {
    ...
  });
  </code></pre>
  
  <p>to trigger the showing of these flyouts and it seemed to work but I can’t get the closing of these quite right. I did some research into this and some other people were doing things like:</p>
  
  <pre><code>$(‘html’).on(‘touchstart’, function() {
    ...
  });
  </code></pre>
  
  <p>as way to listen for a touch anywhere on the page and then force-close a currently-open flyout. This, however, seems a little crude and means that the flyout will close if the user touches somewhere in the flyout itself, which is not desirable. Would it be better to use jQuery’s <code>not</code> selector here and rule out all flyouts for areas that can be touched to close the flyout or is there a better way to handle this? A good example of what I'm trying to achieve is how Amazon are handling their flyouts in the right side of their main navigation. Tap once to open, tap again to follow the link, or tap/scroll anywhere else to close the flyout. I'm pushing to completely refactor the way these flyouts are handled so that mobile/touch is considered from the start but, at least for now, I'd like to figure out a way to achieve what I mentioned above.</p>
  
  <p>Thanks in advance.</p>