How to check browser for touchstart support using JS/jQuery?
JavascriptJqueryIphoneMobileUnobtrusive JavascriptJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
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 - Javascript
You could check if typeof document.body.ontouchstart == "undefined" to fall back to normal dom events
Solution 4 - Javascript
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.