How to check browser for touchstart support using JS/jQuery?

Solution 1:

You can detect if the event is supported by:

if ('ontouchstart' in document.documentElement) {
  //...
}

Give a look to this article:

• Detecting event support without browser sniffing

The isEventSupported function published there, is really good at detecting a wide variety of events, and it's cross-browser.

Solution 2:

Use this code to detect if the device supports touch.

Also work for windows 8 IE10 which uses 'MSPointerDown' event instead of 'touchmove'

var supportsTouch = false;
if ('ontouchstart' in window) {
    //iOS & android
    supportsTouch = true;

} else if(window.navigator.msPointerEnabled) {

    // Windows
    // To test for touch capable hardware 
    if(navigator.msMaxTouchPoints) {
        supportsTouch = true;
    }

}

Solution 3:

You could check if typeof document.body.ontouchstart == "undefined" to fall back to normal dom events

Solution 4:

I made a full demostration that works in every browser with the full source code of the solution of this problem: Detect touch screen devices in Javascript.