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?

4 Answers 4

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.

8
  • 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, 2010 at 19:26
  • great resource. Thanks for the quick help!
    – Alex
    May 26, 2010 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, 2012 at 4:13
  • 1
    Is this the same as document.documentElement.hasOwnProperty('ontouchstart')?
    – Jondlm
    Sep 20, 2013 at 18:31
  • 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, 2014 at 17:52
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;
    }

}
4
  • 3
    Why not simplify it as a one-liner? var supportsTouch = ('ontouchstart' in window || window.navigator.msPointerEnabled) Jan 10, 2017 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? Feb 8, 2017 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, 2018 at 4:02
  • Modified answer to check for msMaxTouchPoints (tests for touch support) Feb 19, 2018 at 7:27
3

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

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.

2
  • 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.
    – Nilpo
    Feb 18, 2018 at 4:03
  • @Nilpo Maybe you're right. This post was written more than seven years ago. Mar 2, 2018 at 17:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.