61

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?

Alex
  • 3,719
  • 4
  • 26
  • 25

4 Answers4

100

You can detect if the event is supported by:

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

Give a look to this article:

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

lleaff
  • 4,249
  • 17
  • 23
Christian C. Salvadó
  • 807,428
  • 183
  • 922
  • 838
  • 1
    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 ;-) – Andy E May 26 '10 at 19:26
  • great resource. Thanks for the quick help! – Alex May 26 '10 at 20:47
  • 18
    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. – RobG Aug 14 '12 at 04:13
  • 1
    Is this the same as `document.documentElement.hasOwnProperty('ontouchstart')`? – Jondlm Sep 20 '13 at 18:31
  • @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. – abelito Nov 18 '13 at 18:57
  • 3
    @RobG I ran this in Chrome 35.0.1916.153 m on a non-touch laptop and got `false`, as expected. Am I missing something? – Nick Jun 30 '14 at 17:52
  • 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. – Kevin Bullaughey Jun 11 '15 at 18:24
  • is there similar way to detect pointer event api? mainly the safari browser is the one unsupported – Akin Hwan Jun 06 '19 at 15:35
12

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

}
George Filippakos
  • 16,359
  • 15
  • 81
  • 92
  • 3
    Why not simplify it as a one-liner? ``var supportsTouch = ('ontouchstart' in window || window.navigator.msPointerEnabled) `` – Michael Lumbroso Jan 10 '17 at 12:35
  • 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? – Swiss Mister Feb 08 '17 at 21:53
  • This is just wrong. The Pointers API applies to more than just touch devices. It applies to every virtually every input device. – Nilpo Feb 18 '18 at 04:02
  • Modified answer to check for msMaxTouchPoints (tests for touch support) – George Filippakos Feb 19 '18 at 07:27
3

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

antimatter15
  • 1,436
  • 1
  • 12
  • 18
1

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.

Manuel Ignacio López Quintero
  • 2,598
  • 4
  • 28
  • 30