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 mobile site that has an tag that will have an onclick or touch event. In the case of an iPhone, we'd like to use the "touchstart" event. We'd like to test if their device supports "touchstart" before we bind that handler to the object. If it doesn't, then we will bind "onclick" instead.

What is the best way to do this?

Heighho

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.

Tedium

I'm sort of tempted to +1 this, but I know that Firefox will return false here for the wrong reasons. Firefox returns false for all events checked in this manner (I know, it's one of those rare situations where Fx sucks). The article does go into that though, so you get your +1 ;-) – Patience

This only detects if the browser supports touch events, it doesn't determine if the device supports them. Try this in Chrome on a non–touch device. – Benign

Is this the same as document.documentElement.hasOwnProperty('ontouchstart')? – Tamikotamil

@Andy E: Looks to be working now. Firefox version 18.0.0.4752 appears to support this after testing with ontouchstart (false) and onclick (true) on my desktop. – Altitude

@Benign I ran this in Chrome 35.0.1916.153 m on a non-touch laptop and got false, as expected. Am I missing something? – Colfin

Be wary of translating "ontouchstart" in document.documentElement into coffeescript, it won't work as expected because the in operator has different semantics. Rather than figure out how to do this in coffeescript, I just wrapped backticks around it and it worked using the javascript expression. – Blueing

is there similar way to detect pointer event api? mainly the safari browser is the one unsupported – Uzia

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

}

Pegram

Why not simplify it as a one-liner? var supportsTouch = ('ontouchstart' in window || window.navigator.msPointerEnabled) – Endstopped

Unfortunately, this does not work for ie 11 on Windows 10 on HP laptop (without touchscreen) for me. It wrongly says supportsTouch = true. but when I bind something to "touchstart", it never gets executed. Any way around this? – Laborious

This is just wrong. The Pointers API applies to more than just touch devices. It applies to every virtually every input device. – Glyoxaline

Modified answer to check for msMaxTouchPoints (tests for touch support) – Pegram

Answer 3

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

Heinrick

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

Hegumen

Your example produces a lot of false positives. There are many browsers that implement the Touch API by default whether or not a touch devices is actually attached to the system. – Glyoxaline

@Glyoxaline Maybe you're right. This post was written more than seven years ago. – Deena