Databases
StackOverflow2013
Postsdbo
PODetermine and bind click or "touch" event
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODetermine and bind click or "touch" event
    primarykey
    data
    text
    <p>I'm using the below code to bind "click" or "touchstart" events (using jQuery's <a href="http://api.jquery.com/on/"><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 "everything else", but I'm concerned that the above code has "iPad tunnel vision"...</p> <p><strong>My question(s):</strong></p> <p>Do all other devices (for example, Android tablets) have similarly named "touchstart" 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">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">interesting information here</a>, which links to this:</p> <p><a href="https://developers.google.com/mobile/articles/fast_buttons">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">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">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>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USmhulse
    1. USmhulse
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PODetermine and bind click or "touch" event
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PODetermine and bind click or "touch" event
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PODetermine and bind click or "touch" event
      1. USSebastian G. Marinescu
      1. VTFavorite
    1. COWhat happens when you bind multiple events? `$foo.on('touchstart click tap etc', function() { ... });`
      singulars
      1. PODetermine and bind click or "touch" event
      1. USAdam Merrifield
    2. COBased on this question, it looks like `var what = (/(iPhone|iPod|iPad).*AppleWebKit/i.test(navigator.userAgent)) ? 'touchstart' : 'click';` might cover more bases.
      singulars
      1. PODetermine and bind click or "touch" event
      1. USmhulse
    3. CO@AdamMerrifield Thanks for the reply! That's a great question... Is `tap` what other devices use? Would there be any drawbacks to binding multiple events at once (perhaps, checking `e.type` could get a little squirrely... and what about performance issues?) Still though, it's a good idea/question... **I wouldn't mind getting away from UA sniffing.** Hmmm, I need to test some; I'll be back with my findings. Thanks!!!
      singulars
      1. PODetermine and bind click or "touch" event
      1. USmhulse
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload