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

Question

In an attempt to follow best practices, we\'re trying to use the proper JavaScript/jQuery events according to what device you are using. For example, we\'re building a mobil

Answer 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.

Answer 2

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

Answer 3

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.

Answer 4

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;
    }

}