Detecting touch screen devices with Javascript

javascript jquery iphone android
Brad Robinson picture Brad Robinson · Oct 20, 2010 · Viewed 139.9k times · Source

In Javascript/jQuery, how can I detect if the client device has a mouse?

I've got a site that slides up a little info panel when the user hovers their mouse over an item. I'm using jQuery.hoverIntent to detect the hover, but this obviously doesn't work on touchscreen devices like iPhone/iPad/Android. So on those devices I'd like to revert to tap to show the info panel.

Answer

KevBurnsJr picture KevBurnsJr · Jun 23, 2011 
var isTouchDevice = 'ontouchstart' in document.documentElement;

Note: Just because a device supports touch events doesn't necessarily mean that it is exclusively a touch screen device. Many devices (such as my Asus Zenbook) support both click and touch events, even when they doen't have any actual touch input mechanisms. When designing for touch support, always include click event support and never assume any device is exclusively one or the other.

Related questions

How do I make a JQuery Slider-like feature on iPhone/Android web app?

In the iPhone or Android, if you have a JQuery Slider, it doesn't quite work (touchscreen will move the screen instead of drag the slider.)

Read More
Is there a JQuery alternative to JQTouch with better Android Support?

Basically looking for a JQuery plugin with better Android browser support than JQTouch. Or even an alternative Javascript framework with better mobile support.

Read More
$(document).click() not working correctly on iPhone. jquery

This function works perfectly on IE, Firefox and Chrome but when on the iPhone, it will only work when clicking on a <img>. Clicking on the page (anywhere but on a img) wont fire the event. $(document).ready(…

Read More