Determine and bind click or "touch" event

Question

I'm using the below code to bind "click" or "touchstart" events (using jQuery's on(eventType, function() { ... })).

var what = (navigator.userAgent.match(/iPad/i)) ? 'touchstart' : 'click';

Later on:

$foo.on(what, function() { ... });

... which works great for iPad and "everything else", but I'm concerned that the above code has "iPad tunnel vision"...

My question(s):

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?

In other words, how can I account for a wider range of touch devices in above code (not just iPad)?

---

EDIT #1

What do you folks think about this:

var foo = ('ontouchstart' in window) ? 'touchstart' : ((window.DocumentTouch && document instanceof DocumentTouch) ? 'tap' : 'click');

Note: Most of the above logic is from Modernizr here.

The above appears to work for Firefox/iPad... I don't have much else to test on at this time.

What I like about the above is that I'm not UA sniffing. :)

Is tap a good default for all other touch devices?

---

EDIT #2

Some interesting information here, which links to this:

Creating Fast Buttons for Mobile Web Applications

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.

---

EDIT #3

Some good info here too:

Android and iPhone touch events

Android and iPhone versions of WebKit have some touch events in common:

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

After reading that, I think I'll change the code above to this:

var foo = (('ontouchstart' in window) || (window.DocumentTouch && document instanceof DocumentTouch)) ? 'touchstart' : 'click';

When I first asked my question - not having access to anything other than an iPad/iPhone - I assumed touchstart was an iOS-specific event; it now looks like touchstart and click will cover most, if not all, of the bases for touch devices.

---

August 2014 update:

If it's of any help, I've posted some utility classes here:

• mhulse / no-x.js:

  [no-js] [no-touch] JavaScript utilities to put in of HTML templates that will add js or touch classes for use in CSS and/or JS.

Solution 1

Both iOS and Android have touch events, but Windows uses MSPointer events in IE. If you want a cross-device solution, try pointer.js or learn from it:

https://github.com/borismus/pointer.js

Solution 2

I would strongly suggest against using UA in order to determine whether you're under touch environment.

Use Modernizr instead: http://modernizr.com/ The below code would recognize anything but windows phone 7 because the windows phone 7 does not fire the regular browser touch events. However WP8 would most probably be recognized correctly.

if (Modernizr.touch){
   // bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
   // bind to normal click, mousemove, etc
}

Solution 3

This may work for you:

var clickEvent = ((document.ontouchstart!==null)?'click':'touchstart');
$("#mylink").on(clickEvent, myClickHandler);

Comments

[mhulse]

Thanks for tips! I completely agree with you about UA sniffing. In this case, I'm writing a jQuery plugin and I would like to avoid having Modernizr as a dependency. OTOH, I really really appreciate you providing a code example (+1). Coincidentally, I'm currently using a slightly modified version of this Modernizr code to detect if it's a touchstart or click (see edits #1 and #3 in my original question above).

[mhulse]

Interesting! Thanks for the tips and help; I'm checking out the code now.

[aruno]

also don't forget to consider devices such as Microsoft Surface (or many Windows 8 laptops) that have both touch AND mouse, and in the case of Surface a stylus too. i.e. don't disable behavior based on 'touch' existing without careful thought

[Devon Sams]

It looks like pointer.js is now deprecated in favor of this pointer events polyfill github.com/jquery/PEP (based on W3 pointer events standard).

[Reggie Pinkham]

Thanks! Good for iOS and desktop.

[Jordan Sitkin]

@DenysVitali can you explain?