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

Question

In an attempt to follow best practices, we try to use the appropriate JavaScript / jQuery events, depending on which device you are using. For example, we create a mobile site with a tag that will have an onclick or touch event. In the case of the iPhone, we would like to use the "touchstart" event. We want to check whether their device supports touchstart before associating this handler with an object. If it is not, then we will link onclick.

What is the best way to do this?

Answer 1

You can determine if the event is supported:

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

Take a look at this article:

• Detect event support without hacking the browser

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

Answer 2

Use this code to determine if a device supports touch connectivity.

We also work for Windows 8 IE10, which uses the event "MSPointerDown" instead of "touchmove"

 var supportsTouch = false; if ('ontouchstart' in window) { //iOS & android supportsTouch = true; } else if(window.navigator.msPointerEnabled) { //Win8 supportsTouch = true; } 

Answer 3

You can check if typeof document.body.ontouchstart == "undefined" returns to normal dom events

Answer 4

I made a full demo that works in every browser with the full source code for solving this problem: Detecting touch screen devices in Javascript .